带有redux的React-Native-Navigation V2无法传递道具

问题描述 投票:4回答:1

我有一个简单的两个屏幕应用程序与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>
        );
      }
    };
  };
}

第一视图:

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);

第二观点:

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);
react-native redux react-native-navigation wix-react-native-navigation react-native-navigation-v2
1个回答
4
投票

视图应以这种方式注册:

export default (store, Provider) =>  {
  Navigation.registerComponentWithRedux('example.app.FirstScreen', () => FirstScreen, Provider, store);
  Navigation.registerComponentWithRedux('example.app.SecondScreen', () => SecondScreen, Provider, store);
}
© www.soinside.com 2019 - 2024. All rights reserved.