React Native FlatList添加新项后不更新的问题排查

你的代码逻辑本身是正确的，但有两个细节可能导致FlatList看起来没更新：

1. 父容器View缺少布局样式 #

默认情况下React Native的View没有设置高度，FlatList的高度会被限制在初始内容的范围内，新增的项会超出可视区域，看起来像是没更新。给外层View添加flex:1样式，让它占满可用空间：

2. 使用函数式更新state避免闭包问题 #

当更新依赖于之前的state时，直接使用data可能会因为闭包拿到旧的state值（比如快速多次点击按钮时），改用函数式更新能确保每次基于最新的state操作：

修改后的完整代码：

import React, { useState } from 'react';
import { View, Text, Button, FlatList } from 'react-native';

export default function App() {
  const [data, setData] = useState([{ id: '1', name: 'Item 1' }]);

  const addItem = () => {
    setData(prevData => {
      const newId = (prevData.length + 1).toString();
      return [...prevData, { id: newId, name: `Item ${newId}` }];
    });
  };

  return (
    <View style={{ flex: 1, paddingTop: 20 }}>
      <Button title="Add Item" onPress={addItem} />
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text style={{ padding: 10 }}>{item.name}</Text>}
      />
    </View>
  );
}

另外也可以检查下keyExtractor返回的id是否唯一，你的写法是基于数组长度生成，只要没有手动修改数组的情况，这个是没问题的。

内容的提问来源于stack exchange，提问作者c-137