React Native：当道具改变时更新 ListView 行

Question

我有一个带有 renderRow() 功能的 ListView 组件。我的自定义 ListBountiesView 组件呈现一个 ListView Row 也采用一个名为 cr 的道具，并根据 cr.

的值在每一行中显示一些内容

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

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

我想 ListView 仅在 data 属性更改时更新，但我如何将道具移动到我的 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

将您的 customerRelationship 移动到 bounty 对象。每个 bounty 都应该有这个属性，然后检查它在 rowHasChanged 中的值是否更改。另一种方法是检查 componentWillReceiveProps 函数中的 customerRelationship ，如果它的值改变了克隆 bounties 那么它的所有子对象都有新的对象引用。

Answer 2

ListView 在 data 属性获得新引用时刷新数据源：

 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 和许多其他线程中进行了讨论。普遍接受的解决方法是创建一个新的数据数组。在您的情况下，每当 customerRelationship 发生变化时，请在 componentWillReceiveProps 中执行此操作。

React Native：当道具改变时更新 ListView 行

React Native: Update ListView Row when props changes

react-native

react-native-listview

shoutem