状态更改时，平面列表不会在功能样式组件中重新呈现

Question

我这里有一个完整的回购 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>
          )}
        />

Answer 1

你应该像下面那样做

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

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

Answer 2

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

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

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

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

状态更改时，平面列表不会在功能样式组件中重新呈现

flatlist is not re rendering in function style component when state changed

react-native

react-native-flatlist