Question

我有一个带有renderRow()功能的ListView组件。我的自定义ListBountiesView组件呈现ListView行也会使用名为cr的道具，并根据cr的值显示每行中的一些内容。

问题是当this.props.customerRelationship更改其值时，ListView行不会更新。

我这样做：this.props.customerRelationship.points += responseJson.points;

我猜ListView仅在data属性更改时更新，但是如何将props移动到renderRow组件以便它们也更新ListView？

SuperScreen.js

renderRow(bounty) {
  const { customerRelationship } = this.props;
  return (
    <ListBountiesView
      key={bounty.id}
      bounty={bounty}
      cr={customerRelationship}
      onPress={this.openDetailsScreen}
    />
  );
}

render() {
    const { bounties } = this.props;

    return (
      <ListView
          data={bounties}
          renderRow={this.renderRow}
          loading={loading}
      />
    )

Answer 1

当data道具获得新的参考时，ListView会刷新数据源：

 componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data) {
      this.setState({ dataSource: this.listDataSource.clone(nextProps.data) });
    }

    if (nextProps.loading !== this.props.loading) {
      this.setLoading(nextProps.loading);
    }
  }

类似地，React Native的ListView在其数据源更改时刷新。这在他们的GitHub和许多其他线程中进行了讨论。普遍接受的解决方法是创建一个新的数据数组。在您的情况下，只要componentWillReceiveProps更改，就在customerRelationship中执行此操作。

Answer 2

将您的customerRelationship移至bounty对象。每个bounty都应具有此属性，然后检查rowHasChanged中的值是否已更改。其他方法是检查customerRelationship函数中的componentWillReceiveProps，如果它的值已更改为clone bounties，那么它的所有子项都有新的对象引用。

React Native：当props更改时更新ListView行

2 个答案: