状态更改时，flatlist 不会在函数样式组件中重新呈现答案

【问题标题】：flatlist is not re rendering in function style component when state changed状态更改时，flatlist 不会在函数样式组件中重新呈现
【发布时间】：2020-12-03 00:35:23
【问题描述】：

我在这里有一个完整的回购https://snack.expo.io/8NOF1nuoW。

我正在尝试添加一些名称，并在文本更改事件中添加对象新数据。

因为对象数组是一个状态变量。它没有反映在列表中。

如果我现在添加新数据，那么在下次更改数据时，新数据会更新。

const [prodName, setProdName] = useState('');
var [data, setData] = useState(DATA);

const DATA = [
  {
    prodName: 'Screen Guard',
  },
];

onPress={() => {
       console.log(DATA);
       DATA.push({prodName: prodName});
       setData(DATA);
}}>


<FlatList
          data={data}
          keyExtractor={(item) => item.prodName}
          extraData={data}
          renderItem={({item}) => (
            <View style={styles.listView}>
              <Text style={styles.listViewText}>{item.prodName}</Text>
            </View>
          )}
        />

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

React 不知道是否将数据添加到数组中，只有当数组的引用发生变化时。 Flatlist 也一样。

因此，要创建对数组的新引用，您需要创建一个新数组。

const onPress={() => {
       setData([...data, {prodName: prodName}]);
}}>

语法： [...data] 通过将data 复制到新创建的数组[] 中来创建一个新数组，这称为扩展运算符。 Documentation here

【讨论】：

@rock 采用这个解决方案，这很优雅 :)
我认为 Facebook 的开发人员比平面列表更聪明。但平面列表令人困惑。

【解决方案2】：

你应该像下面那样做

onPress={() => {
       console.log(data);
       const updatedArray=[...data]
       updatedArray.push({prodName: prodName});
       setData(updatedArray);
}}>

您没有更改状态数组，这就是它没有得到反映的原因。执行此操作时，更改将在您将其设置为新数组时反映出来。

【讨论】：

我很高兴你。请告诉对象克隆完成的原因。我的代码有什么问题。
所以 react 比较了数组引用，所以它不会看到变化，所以克隆完成