Question

我在组件内部有一个ListView，有时在场景加载后很快会调用setState，在这个设置状态下，我传递一个新的数据源数组，我类似于前一个但是前面加上一个元素。所以反应会重新呈现ListView，但问题是它是通过级联更新道具或行来实现的。这是例证：

我有一个列表视图：

<Component someProp=B /> // instance ID 1
<Component someProp=C /> // instance ID 2
<Component someProp=D /> // instance ID 3

这里实例ID是构造组件的一些ID，我将其展示以供参考。现在，在我使用具有道具A的对象前置数据之后，这发生在列表视图中：

<Component someProp=A /> // instance ID 1
<Component someProp=B /> // instance ID 2
<Component someProp=C /> // instance ID 3
<Component someProp=D /> // instance ID 4

如您所见，反应创建了新的组件实例，但是对于最后一个元素（prop D），之前的元素都更新了触发componentWillReceiveProps。实例1被赋予了A而不是B，等等。

但问题在于：在构建行组件时，我立即运行代码，将组件与远程服务器同步，如下所示：

constructor(props) {
  super(props)
  this.state = {
    title: props.someProp,
    data: getCachedData(props.someProp)
  }
  RemoteServer.getFreshData(props.someProp)
    .then(data => this.setState({data}))
}

因此，这会产生一种糟糕的情况：当从远程服务器获取完成时，此组件可能已经收到了新的someProp，因此新数据被推送到错误的组件实例中。当然，我可以在componentWillReceiveProps中再次请求新数据，但这太多了。

有没有办法告诉我的组件在构建时不应该接收新的道具？这样它就可以在其他组件之前创建新组件，而不是更新所有组件的道具。或者有其他方法可以解决我的问题吗？

Answer 1

以这种方式它会分散数据列表以决定是否重新渲染

 import {ListView} from react-native'
 const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

 //first concat old data with the new one
 let concatedData = this.state.dataSource.concat(newData);

 //then call this to update the listview
 this.setState({
     dataSource:ds.cloneWithRows(concatedData)
   });

禁止在ListView

1 个答案: