React Native中useContext存储的列表无法在FlatList正常显示求解

• React的useState状态更新采用浅比较逻辑：当你调用setExpenseList传入的新值和旧值是同一个引用时，React会判定状态没有发生变化，不会触发组件重渲染，Context也不会向下分发更新后的状态。
• 你的代码中const itemsList = expenseList是直接将原数组的引用赋值给新变量，二者指向同一块内存地址，调用push方法修改数组内容后，数组引用没有发生变化，因此setExpenseList(itemsList)不会触发状态更新，首页无法感知到数据变化，FlatList就会展示为空。
• 额外注意：FlatList本身是纯组件，默认会对data属性做引用比较，即使数组内容更新但引用不变，FlatList也不会触发重新渲染。

第一步：修改AddItem页的新增逻辑 #

删除const itemsList = expenseList;这行冗余代码，同时将按钮点击事件中的新增逻辑替换为生成新数组的写法，确保每次更新都是新的数组引用：

// 原来的错误写法
itemsList.push({
  name: name,
  amount: amount,
});
setExpenseList(itemsList);

// 替换为正确写法
setExpenseList([
  ...expenseList,
  { name, amount }
]);
// 添加完成后可直接返回首页
navigation.goBack();

第二步：优化FlatList配置 #

给Home页的FlatList添加keyExtractor属性，避免列表渲染警告，同时保证列表能正确响应数据变化：

<FlatList
  style={styles.listContainer}
  data={expenseList}
  keyExtractor={(item, index) => index.toString()}
  renderItem={(data) => <Text>{data.item.name}</Text>}
/>

修改完成后新增条目再返回首页就能正常看到列表内容了。

内容的提问来源于stack exchange，提问作者Menna Magdy