React useState数组默认值设置异常：赋值后返回undefined

问题根源 #

核心问题是组件首次渲染时catmap2还未完成数据填充，导致调用catmap2.get(c)返回undefined。你看到sinew打印结果正确，大概率是React渲染机制导致的日志顺序偏差——首次执行时catmap2里还没有对应键，后续渲染中catmap2才被填充，但state初始值已经固定。

具体解决步骤 #

1. 确保catmap2就绪后再执行逻辑

如果catmap2是异步获取或父组件传递的异步props，先添加条件渲染，等数据就绪后再处理state相关逻辑：

// 假设catmap2是Map类型，用size判断是否已填充数据
if (!catmap2.size) {
  return <div>加载中...</div>;
}

// 后续si、state初始化逻辑放在这里

2. 修正useEffect的依赖（关键）

使用useEffect设置state时，必须把catmap2和si加入依赖数组，确保数据变化时重新计算：

const si = [...searchParams.getAll("cat")];

const [categoryIds, setCategoryIds] = useState([]);

useEffect(() => {
  // 遍历si取值，同时过滤掉undefined的无效项
  const newCategoryIds = si.map(c => catmap2.get(c)).filter(id => id !== undefined);
  setCategoryIds(newCategoryIds);
}, [si, catmap2]); // 必须添加这两个依赖

3. 避免在useState初始值中依赖未就绪数据

useState的初始值仅在组件首次渲染时执行一次，后续catmap2更新不会重新计算初始值，因此不要直接在初始值里使用可能未就绪的catmap2。

代码简化优化 #

用Array.prototype.map替代forEach生成目标数组，同时过滤无效值：

const sinew = si.map(c => catmap2.get(c)).filter(Boolean);

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