该操作正在接收道具并将其记录到控制台，但接收这些相同道具的组件将无法在我的UI上呈现。这是一个React Native应用程序。这是一个link to the Repo 要查看的所有页面都在src文件夹中。
我跟着Buckies video series来实现这个目标，所以我的代码几乎就像他的代码一样。我更改的唯一代码行是我的OnPress功能。这是我尝试过的唯一允许控制台接收道具的语法。此外，在他的视频系列中，他创建了两个独立的组件。我将两个组件合并为一个组件，因此我在下面的代码较少。一直试图让这个工作整周:(
我的行动创作者：
import USER_SELECTED from './types';
export const selectUser = (user) => {
console.log("You clicked on user:", user.first);
return {
type: USER_SELECTED,
payload: user
}
};
我的行动减少
import USER_SELECTED from '../actions/types';
export default (state={}, action) => {
switch(action.type) {
case USER_SELECTED:
return action.payload;
break;
}
return state;
};
我的组成部分
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { selectUser } from '../../actions';
class UserList extends Component {
createListItems() {
return this.props.users.map((user) => {
return (
<View key={user.id}>
<Button onPress={function(){return selectUser(user);}}>
<Text>{user.first} {user.last}</Text>
<Icon style={styles.TextLight} name='arrow-forward' android="md-arrow-forward"/>
</Button>
</View>
);
});
}
render() {
return (
<View>
{this.createListItems()}
{/* ALL BUTTONS ARE MAPPED, AND DISPLAYED HERE */}
<View>
<Text style={{fontSize: 20, margin: 10}}>First: {this.props.user.first} </Text>
<Text style={{fontSize: 15, margin: 10}}>Last: {this.props.user.last} </Text>
{/* THESE TEXT OBJECTS ARE NOT DISPLAYING THE PROPS WHEN THE BUTTON ABOVE IS CLICK. IT ONLY SHOWS
IN THE CONSOLE. */}
</View>
</View>
);
}
}
function mapStateToProps(state) {
return {
users: state.users,
user: state.activeUser
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({ selectUser: selectUser }, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
我的屏幕
import UserDetails from '../../components/users/ActiveUser';
class LCL extends Component {
render() {
return (
<Container>
{/* <ImageBackground source={launchscreenBg} style=
{styles.imageContainer}> */}
<Header style={styles.MainContainer} hasTabs>
<Left/>
<Body>
<Title style={styles.title_font}>LCL</Title>
</Body>
<Right />
</Header>
<Content padder>
<Text>
This is the LCL shipments
</Text>
<UserList />
</Content>
<Footer_Nav navigation={this.props.navigation}/>
</Container>
);
}
}
export default LCL
我的减速文件中的MY INDEX.JS文件
import { combineReducers } from 'redux';
//import keys from './keys_reducer';
import UserReducer from './LCL_reducer_data';
import AirReducer from './Air_reducer_data';
import ActiveUserReducer from './LCL_ActionReducer_active_user';
const AllReducers = combineReducers({
users: UserReducer,
AirList: AirReducer,
activeUser: ActiveUserReducer,
//keys: keys,
});
export default AllReducers;
问题是你没有正确地调度动作，你只是在运行动作创建者，但它没有做任何事情只是返回一个对象（实际动作）。
为了解决这个问题，你需要调度这样的动作：
store.dispatch(selectUser());
这样行动将转到减速器，您的减速器将更新，然后您的组件将接收新数据。
您可以从上下文中获取商店，但是......您也可以使用已经在matchDispatchToProps中绑定它的功能，为此，您需要执行以下操作：
createListItems() {
const selectUserBinded = this.props.selectUser; // <----
return this.props.users.map((user) => {
return (
<View key={user.id}>
<Button onPress={function(){return selectUserBinded(user);}}>
<Text>{user.first} {user.last}</Text>
<Icon style={styles.TextLight} name='arrow-forward' android="md-arrow-forward"/>
</Button>
</View>
);
});
}
该功能将使用商店中的dispatch自动运行您的动作创建者。
请注意this.props.selectUser !== selectUser !! this.props.selectUser已经绑定到商店，而selectUser不是。
编辑尝试绑定您的动作，如下所示：
function mapStateToProps(state) {
return {
users: state.users,
user: state.activeUser
};
}
export default connect(mapStateToProps, { selectUser: selectUser })(UserList);
这看起来更干净，更容易理解，第二个参数{ selectUser: selectUser }只是一个带有绑定方法的对象，不需要定义详细函数来进行绑定，只需要一个简单的对象。如果使用ES6，你可以做{ selectUser }