React Context状态更新后useEffect未触发问题求助

你的问题出在表单提交时修改状态的逻辑里——你用了splice直接修改了原数组的内容，然后把同一个数组引用返回给setDestinations。

React的状态更新（包括useState和Context）是通过引用对比来判断状态是否变化的：如果前后状态的引用没有改变，React会认为状态没更新，不会触发组件重渲染，也不会执行依赖该状态的useEffect。

修复方法：执行不可变的数组更新操作 #

不要直接修改原数组，而是创建一个新的数组返回给setDestinations。可以用扩展运算符（...）或者slice+concat来实现：

修改后的submitHandler代码：

const { destinations, setDestinations } = useContext(DestinationsContext);
const submitHandler = (event) => {
  event.preventDefault();
  setDestinations(previousDestinations => {
    // 用扩展运算符拆分原数组，插入新元素后生成新数组
    return [
      ...previousDestinations.slice(0, index),
      new Destination(...),
      ...previousDestinations.slice(index)
    ];
  })
}

额外优化：避免冗余状态 #

你的Menu组件里额外维护了menuItems状态其实没必要，直接在渲染时映射destinations即可，这样能避免状态同步的潜在问题：

function Menu() {
  const { destinations } = useContext(DestinationsContext);

  return (
    <ul>
      {destinations.map((destination, idx) => (
        <DestinationItem key={idx} /> {/* 建议用数据的唯一id作为key，不要用索引 */}
      ))}
    </ul>
  )
}

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