Redux Native Integration未按预期工作

Question

我正在尝试将Redux与我的React Native代码集成，但由于某些原因，输出不如预期。

我希望我在Action.JS中传递的有效载荷(在本例中为"Test"(能动态显示在主屏幕上。。。但相反，我得到了一个"；(this.props.user("；显示在我的主屏幕上。。

有人能提出建议吗。

这就是我正在尝试的

App.js

import React from 'react';
import NavigationContainer from './navigation/RootNavigator';
import reducers from './redux/reducers';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
const middleware = applyMiddleware(thunkMiddleware)
const store = createStore(reducers, middleware);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<NavigationContainer/>
</Provider>
);
}
}

Action.js

export function login(){
return function(dispatch){
dispatch({ type: 'LOGIN', payload: 'test' });
}
}

Reducers.js

export default reducers = (state = {
user: '',
}, action) => {
switch (action.type) {
case 'LOGIN': {
return { ...state, user: action.payload }
}
}
return state;
} 

Home.Js

import React from 'react';
import styles from '../styles'
import {connect} from 'react-redux';
import {login} from '../redux/actions'
import { 
Text, 
View
} from 'react-native';
class Home extends React.Component {
state = {}
componentWillMount() {
this.props.dispatch(login())
}
render() {
return (
<View>
<Text>(this.props.user)</Text>
</View>
)
}
}
function mapStateToProps(state) {
return {
user: state.user
};
}
export default connect(mapStateToProps)(Home);

Answer 1

对于渲染，变量需要使用{}，如下所示。

<Text>{this.props.user}</Text>