React Native：当道具更改时更新 ListView Row

Posted 2023-02-23

【中文标题】React Native：当道具更改时更新 ListView Row

【英文标题】：React Native: Update ListView Row when props changes

【发布时间】：2017-09-28 03:17:55

【问题描述】：

我确实有一个带有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
      />
    )

【问题讨论】：

您不会在任何地方更新您的dataSource，这就是它不会改变的原因。正如其他人所建议的那样，您需要使用其他生命周期事件来捕获更改。或者，您可以考虑使用 FlatList ，它不需要您设置 dataSource 对象并且只需要一个数组 - 这样当您的道具更改时它会自动更新。

【参考方案1】：

当data prop 获得新的引用时，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 和许多其他线程中进行了讨论。普遍接受的解决方法是创建一个新的数据数组。在您的情况下，只要 customerRelationship 更改，请在 componentWillReceiveProps 中执行此操作。

【讨论】：

cloneWithRows

【参考方案2】：

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