React useMemo未返回正确缓存值问题求助

问题根源 #

父组件每次渲染时都会创建新的options数组引用，这会触发子组件useMemo的依赖更新，但你可能因为控制台输出过滤或其他原因没看到useMemo内的日志。而你观察到的initialValues值变化其实是合理的，但当前写法会导致useMemo频繁执行，同时可能让你对执行逻辑产生误解。

修复步骤 #

1. 稳定父组件的options引用
   在父组件中用useMemo缓存options数组，仅当复选框状态变化时才重新生成数组，避免不必要的引用更新：

// 父组件代码修改
const options = useMemo(() => [
  { value: "1", label: "Option 1", state: checked1 },
  { value: "2", label: "Option 2", state: checked2 }
], [checked1, checked2]);

这样子组件的useMemo只会在复选框状态变化时触发重新计算，既保证了值的正确性，又避免无效执行。

2. 验证useMemo执行状态
   检查浏览器控制台的过滤设置，确保未隐藏console.log输出。切换复选框时，子组件useMemo内的console.log(options, 'here')应该会正常打印，此时initialValues会正确更新为选中项的value数组。

3. 优化日志输出（可选）
   修改子组件的日志代码，更清晰地追踪数据变化：

console.log('当前选项列表:', options);
console.log('计算后的初始值:', initialValues);

额外说明 #

如果希望useMemo仅在选项的state或value变化时执行，而非依赖数组引用，也可以在子组件的useMemo中使用更细粒度的依赖（比如提取所有item.state和item.value组成依赖数组），但这种写法不够简洁，优先推荐在父组件缓存options的方案。

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