Question

我通过redux商店获得了items作为prop的列表。这个道具是同步的。

我的ListView使用同步的硬编码数据。因此，当我实际收到它时，问题就在于道具。

我正在使用此项目支持数据制作ListView。使用此支柱设置生命周期的最佳做法是什么？我已经尝试componentDidMount了 - 但这太早了，只调了一次。我试过componentWillReceiveProps - 我得到道具，但我的观点没有改变。我也试过componentWillUpdate而且收到的电话太多了！我很想把它放在渲染函数中，因为我知道当我得到它时我可以抓住那个道具，但这会使渲染函数不再纯净。

感谢您的帮助！

this.setState({
  dataSource: this.state.dataSource.cloneWithRows(this.props.items);
})

Answer 1

The solution was that I actually needed to convert items as a List from immutable to a JS Array for the ListView. Not what I originally thought the problem was in the question.

Here's the solution:

componentWillReceiveProps(newProps){
    if(newProps.items){
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newProps.items.toJS())
      })
    }
  }

I'm still wondering if I'm using best practice by using componentWillReceiveProps. I'm also wondering if it's a little strange that I have to convert from a List to an Array, but if it's purely presentational that is ok, right?

Answer 2

使用componentsWillReceiveProps时，检查这些道具是否已更改是一种很好的做法。也不确定为什么你必须做.toJS()，你只需要返回一个新数组，以便React知道更新。

componentWillReceiveProps(newProps){
  if (newProps.reasonOptions !== this.props.reasonOptions){
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows([...newProps.items])
    });
  }
}

React Native - 使用异步数据填充ListView

2 个答案: