React Native组件重渲染但孙组件props未更新问题排查求助

这问题挺让人困惑的——明明Component B触发了重渲染，却没拿到更新后的props，我来帮你拆解下可能的原因和解决思路：

可能的核心原因 #

1. Component B内部存在未同步的本地状态 #

这是最常见的情况：如果你的Component B里用了useState缓存了props.data，但没监听props的变化做同步，就会出现“props更新但本地状态还是旧值”的情况。比如你可能写了类似这样的代码：

// 错误示例
const Component_B = (props) => {
  const [localData, setLocalData] = useState(props.data);
  console.log(localData); // 这里打印的是初始的空数组，而非更新后的props.data
  return <></>;
}

此时哪怕props.data更新了，localData还是停留在初始的空数组状态，自然打印结果不符合预期。

2. 意外使用了React.memo且浅比较失效 #

如果你给Component B套了React.memo，还自定义了错误的比较函数，可能会导致组件“假重渲染”——看起来触发了渲染，但实际复用了旧的props。比如：

// 错误示例
const Component_B = React.memo((props) => {
  console.log(props.data);
  return <></>;
}, (prevProps, nextProps) => {
  // 错误地返回true，告诉React props没变化
  return true;
});

不过这种情况通常会跳过重渲染，和你说的“Component B第二次渲染”有点矛盾，但还是可以排查下。

3. 数组引用传递过程中出现异常 #

虽然你的屏幕组件里用map生成了新数组（保证了新引用），但如果Component A里对props.data做了额外处理，比如不小心返回了旧数组的引用，也会导致Component B拿到旧值。不过从你贴的代码看，Component A直接传递props.data，这个可能性较低。

快速排查&解决步骤 #

第一步：确认Component B接收到的props真实值 #

先修改Component B的代码，直接打印props.data而非本地状态：

const Component_B = (props) => {
  // 重点：直接打印props.data，不要打印本地缓存的状态
  console.log("Component B 实际接收的props.data:", props.data);
  return <></>;
}

如果此时打印的是更新后的数组，说明问题出在Component B内部的状态缓存；如果还是空数组，就需要检查Component A的传递逻辑。

第二步：同步本地状态（如果用了本地缓存） #

如果确实是本地状态没同步，加一个useEffect监听props.data的变化：

const Component_B = (props) => {
  const [localData, setLocalData] = useState(props.data);

  // 监听props.data的变化，同步到本地状态
  useEffect(() => {
    setLocalData(props.data);
  }, [props.data]);

  console.log("Component B 同步后的本地状态:", localData);
  return <></>;
}

第三步：检查React.memo的比较逻辑 #

如果用了React.memo，要么去掉自定义比较函数，要么确保它能正确识别data的变化：

// 正确用法：依赖React默认的浅比较
const Component_B = React.memo((props) => {
  console.log(props.data);
  return <></>;
});

因为你传递的是新数组（map生成的新引用），默认的浅比较能识别到变化。

额外排查点（针对Context方案） #

你提到用useContext也有同样问题，那要检查Context的Provider是否正确更新了value：

• 确保Context的value是用useMemo缓存的（如果是对象/数组），避免不必要的重渲染；
• 确认更新Context状态时，生成了新的数组引用（比如用setContext(prev => [...prev, newData])而非直接修改原数组）。

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