React Native FlatList数据更新但Poll组件未渲染更新求助

问题根源 #

你的代码存在两个核心问题，导致Poll组件无法同步更新：

1. 直接修改原数组的引用类型对象：let newArray = feedArray;只是赋值原数组的引用，修改newArray[index].surveyArray本质是改动原数据，违反了React不可变更新的原则。
2. 数组浅拷贝无法触发对象引用变化：即使使用[...newArray]创建新数组，数组内的对象仍是原引用，React的浅比较机制会判定数据未变化，不会触发组件重渲染。

解决方案 #

1. 实现不可变数据更新

修改updateSurveyCard函数，通过拷贝数组及内部对象，确保每次更新生成全新的引用：

const updateSurveyCard = () => {
  // 拷贝原数组并对每个对象做浅拷贝，切断原对象引用
  const newArray = feedArray.map(item => ({ ...item }));
  const targetIndex = newArray.findIndex(obj => obj.cardId === item.cardId);

  if (targetIndex !== -1) {
    // 修改拷贝后的对象属性
    newArray[targetIndex].surveyArray = [
      {"percentage": 100, "response": "F"}, 
      {"percentage": 0, "response": "T"}
    ];
  } 

  setFeedArray(newArray);
}

2. 确保Poll组件依赖最新Props

如果Poll组件内部用状态缓存了surveyArray，需要添加监听触发状态更新：

// Poll组件内部
import { useEffect, useState } from 'react';

const Poll = ({ item }) => {
  const [surveyData, setSurveyData] = useState(item.surveyArray);

  // 监听item.surveyArray变化，同步更新组件状态
  useEffect(() => {
    setSurveyData(item.surveyArray);
  }, [item.surveyArray]);

  // 后续渲染使用surveyData
  return (/* 组件内容 */)
}

3. 优化FlatList的keyExtractor

避免用索引作为key，改用唯一标识cardId，防止组件复用异常：

<FlatList
  keyExtractor={(item) => item.cardId}
  // 其他属性保持不变
/>

4. 验证extraData配置

你已经设置了extraData={feedArray}，这部分是正确的，只要feedArray是通过不可变方式生成的新数组，FlatList就会触发重新渲染。

核心逻辑 #

React的状态更新依赖引用变化，对于数组、对象这类引用类型，必须通过创建新的引用（而非修改原引用的内部属性）来触发组件重渲染。严格遵循不可变更新原则，就能解决跨页面组件的数据同步问题。

内容的提问来源于stack exchange，提问作者deepanshi gupta