首先明确说：this.state.Data.push(NewObject) 这种做法完全不正确，这也是你遇到问题的根源。

为什么直接push不行？ #

React的状态更新依赖于状态引用的变化，push是直接修改原数组（属于原地修改，mutate），数组的引用并没有改变，所以React检测不到状态更新，自然不会触发FlatList的重新渲染。而且直接修改状态本身就违反了React的状态不可变原则，容易引发各种奇怪的问题，比如你遇到的键值错误、列表项重复添加等。

正确的添加方式 #

你需要通过setState创建一个新的数组来更新状态，下面是两种常用的正确方法：

方法1：使用扩展运算符（推荐）

利用ES6的扩展运算符把原数组的元素复制到新数组，再追加新项，同时用函数式的setState确保拿到最新的状态：

this.setState(prevState => ({
  Data: [...prevState.Data, NewObject]
}));

方法2：使用concat方法

concat方法会返回一个新数组，不会修改原数组，同样结合函数式setState：

this.setState(prevState => ({
  Data: prevState.Data.concat(NewObject)
}));

解决键值错误的关键 #

你提到的键值错误，大多是因为FlatList的每个项没有唯一的标识。一定要给每个新增的对象添加一个唯一的id（比如后端返回的唯一ID，或者用Date.now()生成临时唯一值），然后在FlatList中配置keyExtractor：

<FlatList
  data={this.state.Data}
  // 用项的id作为唯一key，避免重复或错误的键值
  keyExtractor={item => item.id.toString()}
  renderItem={({ item }) => (
    // 你的列表项渲染组件
    <View>
      <Text>{item.title}</Text>
    </View>
  )}
/>

完整示例 #

比如你可以写一个添加项的方法：

addNewItem = () => {
  // 创建带有唯一id的新项
  const newItem = {
    id: Date.now(),
    title: `新项 ${this.state.Data.length + 1}`
  };
  
  // 更新状态
  this.setState(prevState => ({
    Data: [...prevState.Data, newItem]
  }));
};

这样操作后，FlatList会正确检测到状态变化，重新渲染并添加新项，也不会出现键值错误和重复添加的问题了。

内容的提问来源于stack exchange，提问作者J DOe