6

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

1 回答 1

4

视图应该以这种方式注册：

export default (store, Provider) =>  {
  Navigation.registerComponentWithRedux('example.app.FirstScreen', () => FirstScreen, Provider, store);
  Navigation.registerComponentWithRedux('example.app.SecondScreen', () => SecondScreen, Provider, store);
}
于 2018-09-01T13:53:21.050 回答