React Native自定义组件接收state作为prop未随状态更新问题

• 最常见的原因是Dropdown组件内部将传入的showDelete prop赋值给了内部state，且仅在组件首次挂载时初始化一次，没有监听prop的变化同步更新内部state。当父组件传入的showDelete变化时，内部state仍保留旧值，就会出现不同步的问题。
• 如果Dropdown被React.memo包裹，若自定义的属性比较函数遗漏了对showDelete的判断，也会导致组件跳过重渲染，无法接收最新的prop值。
• 父组件中存在不规范的引用类型状态更新逻辑，你当前setSelected回调中直接修改selectedArray原数组的写法，会导致React无法正确检测状态变化，可能连带影响其他状态更新的触发。

1. 优先检查Dropdown内部是否将showDelete转为内部state使用，如果没有必要存储内部状态，直接使用传入的showDelete prop渲染即可，无需额外转存，从根源避免同步问题。
   如果确实需要转存为内部state，补充useEffect监听showDelete的变化同步更新：

// Dropdown 组件内部
useEffect(() => {
  // 这里把内部对应的showDelete状态更新为最新prop值
  setInternalShowDelete(showDelete)
}, [showDelete])

2. 移除不必要的React.memo包裹，新手阶段不建议随意添加性能优化逻辑，容易引发prop不同步问题。如果必须使用React.memo，检查自定义的areEqual比较函数，补充showDelete的相等判断逻辑。
3. 修正父组件中不规范的状态更新写法，所有引用类型状态修改都要返回新的引用，不要直接修改原数据：

// 修正前的错误写法
// setSelected={(newSelected)=>{selectedArray[key] = newSelected; setSelectedArray(selectedArray)}}
// 修正后的写法
setSelected={(newSelected) => {
  const newSelectedArray = [...selectedArray]
  newSelectedArray[key] = newSelected
  setSelectedArray(newSelectedArray)
}}

4. 可在父组件添加日志确认setShowDelete调用后父组件触发了重渲染，只有父组件重渲染才会将最新的prop传递给子组件。

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