React hooks修改状态后组件不更新，仅DevTools强制更新才生效

你遇到的组件不自动更新的核心原因是直接修改了原state的引用，未触发React的重渲染逻辑：
你的addToOrderList方法中，const list = orderList是引用赋值，list和原orderList指向同一个内存地址，后续调用push是在原数组上修改，最后调用setOrderList传入的还是同一个引用的数组。React对state更新做浅比较，检测到引用没有变化，就会认为state未发生修改，不会触发组件重渲染，所以只有手动强制更新才能生效。

将addToOrderList方法修改为生成新数组的写法即可，推荐配合函数式更新避免闭包陷阱：

const addToOrderList = (order) => {
  setOrderList(prevList => [...prevList, order]);
}

如果需要兼容旧的写法逻辑，也可以先对原数组做浅拷贝再修改：

const addToOrderList = (order) => {
  // 先浅拷贝生成新数组
  const list = [...orderList];
  if (list) {
    list.push(order);
  }
  setOrderList(list);
}

你之前尝试useEffect没有生效，是因为state本身没有触发更新，依赖项没有变化的情况下useEffect自然不会执行回调，不需要额外用useEffect处理这个场景。

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