Redux存储其他数据变更时React useEffect多次触发问题

嘿，我来帮你拆解下这个问题：当触发BaseSelect的选择事件后，dispatch更新Redux里的attach数据，结果BaseSelect里的useEffect打印了两次init。主要有两个核心原因：

1. 遍历组件缺少唯一key，导致组件被重复挂载 #

看你Info组件里的这段代码：

{attach.map((child, cidx) => (<Template data={child} />))}

你遍历attach生成Template组件时，没有给每个组件设置唯一且稳定的key。当Redux的attach数据更新后，React没法准确识别哪些组件是需要保留、更新还是替换，只能把旧的Template（包括内部的BaseSelect）全部卸载，再重新创建一批新的组件实例。每一个新创建的BaseSelect都会执行一次空依赖的useEffect，这是第一次额外的打印。

2. React Strict Mode 开发环境的调试行为 #

如果你是在开发环境运行代码，React的Strict Mode会主动把useEffect（空依赖或者没有清理函数的effect）执行两次，目的是帮你提前发现副作用泄漏、重复执行这类潜在问题。这是第二次打印的原因，这个行为只在开发环境存在，生产环境不会出现。

对应的解决步骤 #

第一步：给遍历组件添加唯一key #

给attach.map里的Template加上基于数据唯一标识的key（别用索引cidx当key，数组元素顺序变化时会出问题）。假设你的AttachData对象有唯一的id字段：

{attach.map((child) => (<Template key={child.id} data={child} />))}

这样React就能精准识别组件实例，只会更新变化的部分，不会全部卸载重建，避免不必要的useEffect执行。

第二步：处理Strict Mode的双重执行（可选） #

如果是Strict Mode导致的开发环境双重打印，这是正常的调试机制，没必要修改代码。但如果你想临时在开发环境去掉这个行为，可以把根组件的StrictMode包裹去掉（不推荐，因为它能帮你提前排查隐藏bug）：

// 原来的根组件结构
<React.StrictMode>
  <App />
</React.StrictMode>

// 修改后（仅临时调试用）
<App />

记住，生产环境下Strict Mode不会触发这个行为，上线后就不会有两次打印的问题了。

额外优化：修复BaseSelect的useEffect依赖 #

你的BaseSelect里的useEffect依赖是空数组，但内部用到了list这个props，这会导致list更新时useEffect不会重新执行，很可能引发逻辑bug。应该把list加入依赖项：

useEffect(() => {
 if (!isEmpty(list)) {
  // 你的初始化逻辑
 }
 console.log('init')
}, [list]) // 把list添加到依赖数组中

这样当list变化时，useEffect会正确执行初始化逻辑，而不是只在组件挂载时跑一次。

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