Question

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

Answer 1

视图注册方式如下：

export default (store, Provider) =>  {
  Navigation.registerComponentWithRedux('example.app.FirstScreen', () => FirstScreen, Provider, store);
  Navigation.registerComponentWithRedux('example.app.SecondScreen', () => SecondScreen, Provider, store);
}

带有redux的React-Native-Navigation V2无法通过道具

1 个答案: