Question

我似乎无法让ListView更新。

我有一个带有切换开关（<SegmentedControls />）的父容器。当用户点击该切换开关时，我希望子组件中的ListView使用更新的reservationListSelectedOption状态值进行更新。

我错过了什么？

此处代码：https://gist.github.com/chapeljuice/69483ab0bde13346de024d4e4a9753f0

Answer 1

实际上，你设置dataSource的方式有问题，在你的构造函数中，你是第一次用new ListView.DataSource({})设置它（以后不应该更改，因为这只是一种虚拟的东西，还没有传递给它的数据）

但是，稍后您使用以下内容重置该状态：dataSource: this.state.dataSource.cloneWithRows(reservationData.previous)

=＆GT; （这里它有cloneWithRows，所以它现在有数据=＆gt;这意味着this.state.dataSource＆＃34;虚拟帧＆＃34;本身已被更改，并且下一次执行{{ 1}}将失败 - 将不再具有.cloneWithRows功能）

==＆GT;的解决方案：

在我看来，你可以这样做：

在 cardList.js ：

.cloneWithRows

..稍后，您只需要使用// Put the data-source ds here, which won't be changed var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}); class CardList extends React.Component { constructor(props) { super(props); this.state = { reservationListStatus: this.props.reservationListStatus, dataSource: ds.cloneWithRows(/* PUT YOUR INITIAL reservationData, OR JUST a blank array '[]' will be fine*/), }; }（始终保持ds.cloneWithRows(YOUR_NEW_RESERVATION_DATA)不变），如下所示：

ds

这是你应该做的，但如果它还没有工作，请在这里发布你遇到的一些错误，谢谢

Answer 2

尝试将componentWillReceiveProps添加到您的子组件。它看起来像这样：

  componentWillReceiveProps(nextProps) {
    if (this.props.options !== nextProps.options) {
      this.setState({ reservationListSelectedOption: nextProps.options[0] });
    }
  }

Answer 3

实际上我找到了一个解决方案，感谢thinhvo0108和Matt Aft帮助我实现目标。

这是我修改后的componentWillReceiveProps函数，它与fixed dataSource结合使用，现在正确更新了ListView：

componentWillReceiveProps (nextProps) {
  if ( nextProps.reservationListStatus === "Past Reservations" ) {
    this.setState({
      dataSource: ds.cloneWithRows(reservationData.previous)
    })
  } else {
    this.setState({
      dataSource: ds.cloneWithRows(reservationData.current)
    })
  }
  console.log( 'nextProps.reservationListStatus: ' + nextProps.reservationListStatus );
}

我还使用工作代码https://gist.github.com/chapeljuice/69483ab0bde13346de024d4e4a9753f0

更新了我的要点

React Native：更改父级元素后，子ListView将不会更新

3 个答案: