Roo*_*Roo 5 react-native redux react-native-navigation wix-react-native-navigation react-native-navigation-v2
我有一个简单的两屏应用程序,其中包含redux和React-Native-Navigation V2。我尝试将项目从列表传递到另一个视图作为道具。不幸的是,我得到一个错误:
TypeError:无法读取未定义的属性“ id”
该项目已通过但未在第二视图中作为道具被接收。在没有Redux的情况下,一切正常。我是否正确注册了视图?
查看注册:
export default (store) => {
Navigation.registerComponent('example.app.FirstScreen', reduxStoreWrapper(FirstScreen, store));
Navigation.registerComponent('example.app.SecondScreen', reduxStoreWrapper(SecondScreen, store));
}
function reduxStoreWrapper (MyComponent, store) {
return () => {
return class StoreWrapper extends React.Component {
render () {
return (
<Provider store={store}>
<MyComponent />
</Provider>
);
}
};
};
}
Run Code Online (Sandbox Code Playgroud)
第一视图:
class FirstScreen extends Component {
componentDidMount() {
this.props.listItems();
}
onItemPress = (item: Item) => {
Navigation.push(item._id, {
component: {
name: 'example.app.SecondScreen',
passProps: {
item: item
}
}
});
};
render() {
return (
<View>
<ItemsList items={this.props.items} onItemPress={this.onItemPress}/>
</View>
);
}
}
const mapStateToProps = state => {
let items = state.itemsReducer.items.map(item => ({ key: item.id, ...item }));
return {
items: items
};
};
const mapDispatchToProps = {
listItems
};
export default connect(mapStateToProps, mapDispatchToProps)(FirstScreen);
Run Code Online (Sandbox Code Playgroud)
第二种观点:
class SecondScreen extends Component {
static propTypes = {
item: PropTypes.object.isRequired,
};
componentDidMount() {
const { item } = this.props;
this.props.listSubitems(item.id);
}
render() {
const { subitems } = this.props;
return (
<View>
<SubitemsList subitems={subitems}/>
</View>
);
}
}
const mapStateToProps = state => {
let subitems = state.subitemsReducer.subitems.map(subitem => ({ key: subitem.id, ...subitem }));
return {
subitems: subitems
};
};
const mapDispatchToProps = {
listSubitems
};
export default connect(mapStateToProps, mapDispatchToProps)(SecondScreen);
Run Code Online (Sandbox Code Playgroud)
视图应该这样注册:
export default (store, Provider) => {
Navigation.registerComponentWithRedux('example.app.FirstScreen', () => FirstScreen, Provider, store);
Navigation.registerComponentWithRedux('example.app.SecondScreen', () => SecondScreen, Provider, store);
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
966 次 |
| 最近记录: |