React中useEffect无法检测对象内部数组变更的问题咨询

React 原生useEffect的依赖项默认采用引用相等的浅比较逻辑。你的代码中如果未触发useEffect，常见原因有三个：

1. setValues使用了非函数式更新，存在闭包陷阱，捕获的values是旧值，导致状态更新未生效
2. 传入handleChange的newValues与原type数组内容完全一致，即使是深比较也判定为无变更
3. 若使用use-deep-compare-effect未生效，大概率是导入或用法错误，或者两次状态的实际内容完全相同

• 方案1：拆分状态（最推荐，性能最好，逻辑清晰）
  把复合状态拆为独立的原子状态，避免对象浅比较的问题：

const [query, setQuery] = useState('')
const [type, setType] = useState(["Tender & Auction", "Merger & Acquisition","Policy & Regulation", "Project Update", "Other"])

// 勾选筛选器后重新执行查询
useEffect(() => {
  searchAPI({query, type});
}, [query, type]);

const handleChange = (newValues) => {
  console.log(newValues)
  setType(newValues)
};

• 方案2：使用函数式更新修正闭包问题
  如果需要保留对象形式的状态，修改setValues为函数式更新，避免闭包捕获旧状态导致的更新失效：

const handleChange = (newValues) => {
  console.log(newValues)
  // 用函数式更新拿到最新的prev状态，保证更新正确性
  setValues(prev => ({ ...prev, type: newValues}))
};

• 方案3：无第三方库的深比较适配
  如果不希望拆分状态，也不想引入额外依赖，可以将对象序列化为字符串作为依赖（仅适用于状态内全是可序列化的字符串、数字、数组、普通对象的场景，你的场景完全适用）：

useEffect(() => {
  searchAPI(values);
// 序列化后内容变化就会触发执行
}, [JSON.stringify(values)]);

• 方案4：正确使用深比较Hook
  如果要使用use-deep-compare-effect，确保导入和用法正确：

import useDeepCompareEffect from 'use-deep-compare-effect';

// ...省略其他代码

useDeepCompareEffect(() => {
  searchAPI(values);
}, [values]);

• 调用handleChange时，确认传入的newValues不是原type数组修改后的同引用值，若你修改原数组后直接传入，需要先创建新数组：比如handleChange([...oldArr])
• 打印更新前后的values值，确认状态内容确实发生了变更，内容无变更时所有比较逻辑都不会触发useEffect

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