为何useEffect外部的recent数组自动反转？如何修复？

有一个存储表单提交输入值的recent数组，假设它包含['London', 'Paris']：在useEffect内部打印时数组顺序正确（['London', 'Paris']），但在useEffect外部打印却变成了反转后的['Paris', 'London']。需求是每次向recent添加新值时，将其反转后赋值给list，确保list始终是recent的反转结果，但现在recent本身被意外修改，需要修复这个问题。

核心问题是Array.reverse()是原地修改原数组的方法——它不会创建新数组，而是直接改变调用它的数组本身。你在useEffect中调用recent.reverse()时，虽然当时控制台打印的recent看起来还是原顺序，但这是因为React状态更新异步，控制台打印的是数组的引用，展开查看时实际已经被修改；当组件重新渲染时，recent的状态已经被这个原地操作影响，导致外部打印出反转后的结果。

方案1：创建反转新数组，不修改原recent #

将setList(() => recent.reverse())替换为生成新数组的写法，避免修改原recent：

setList([...recent].reverse());

或者用Array.from复制后反转：

setList(Array.from(recent).reverse());

这样只会基于原数组生成新的反转数组赋值给list，recent的顺序不会被改变。

方案2：简化逻辑，移除冗余状态 #

其实不需要维护reverse和list这两个额外状态，直接在渲染时基于recent生成反转列表即可，彻底避免状态不同步问题：

const RecentSearches = () => {
  // 直接生成反转后的新数组，无需单独维护list状态
  const reversedRecent = [...recent].reverse();

  const searches = reversedRecent.map((value, index) => (
    <button 
      type="submit"
      form="form"
      key={index}
      onClick={() => setSearch(value)}
      onMouseEnter={() => setSearch(value)}
      onMouseLeave={() => setSearch("")}
    >
      {value}
      <i className="fa-solid fa-chevron-right"></i>
    </button>
  ));

  return searches.length > 0 ? searches : "";
};

同时可以删除reverse、list的状态声明，以及对应的useEffect逻辑，handleSubmit中也不需要再调用setReverse(true)。

方案3：函数式更新+正确依赖（保留list状态时用） #

如果必须保留list状态，更新时使用函数式更新确保获取最新的recent值，同时补充正确的依赖项：

useEffect(() => {
  if (reverse) {
    // 生成新的反转数组，不修改原recent
    setList([...recent].reverse());
    setReverse(false);
  }
}, [reverse, recent]); // 依赖项添加reverse和recent，确保状态变化时触发更新

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