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

时间:2020-08-13 07:47:20

标签: react-native react-native-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>
          )}
        />

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

您应该像下面这样

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

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