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

问题描述

我在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>
          )}
        />

解决方法

仅在数组的引用发生更改时，才知道是否将数据添加到数组中。 Flatlist相同。

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

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

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

,

您应该像下面这样

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

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