React多选框点击后状态延迟更新问题求助

你遇到的复选框状态更新延迟，核心原因是状态更新时直接修改了原对象的属性，未创建新对象实例：
虽然你通过[...selectedContentFilters]克隆了数组，但数组内的对象还是原状态的引用。当你直接修改filter.checked = !filter.checked时，对象本身的引用没有变化，React的浅比较机制无法立即感知到状态变更，只有后续其他操作触发状态更新时，才会一并渲染之前的修改。

修改状态更新函数，在匹配目标ID时返回全新的对象，而非直接修改原对象属性，确保数组和内部对象的引用都发生变化，让React能实时检测到状态更新并渲染。

修改后的_setSelectedContentFilter函数 #

const _setSelectedContentFilter = (id) => {
  const updatedFilters = selectedContentFilters.map((filter) => {
    if (filter.id === id) {
      // 用扩展运算符创建新对象，覆盖checked属性
      return { ...filter, checked: !filter.checked };
    }
    return filter;
  });
  setSelectedContentFilter(updatedFilters);
};

额外优化：简化初始化逻辑 #

可以直接在useState中完成初始化，去掉不必要的useEffect：

const contentFilters = ['Videos', 'Life Events', 'Collabs'];
const [selectedContentFilters, setSelectedContentFilter] = useState(
  contentFilters.map((filter, index) => ({
    id: index + 1,
    label: filter,
    checked: false,
  }))
);

通过{ ...filter, checked: !filter.checked }创建新对象，保证了被修改的项是全新的引用，结合新数组的引用变化，React的状态比较机制能准确识别到状态变更，从而立即触发组件重新渲染，复选框状态就能实时更新了。

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