页面刷新时useEffect内setItem重复执行，寻求技术解决方案

当前代码每次页面刷新都会触发setItem，核心原因是数组是引用类型：页面刷新后从localStorage读取数据并赋值给inputArr时，会创建一个新的数组对象，即使内容和之前完全一致，useEffect的依赖inputArr也会被判定为“变化”，从而执行回调。

解决思路是：只在inputArr的实际内容和localStorage中存储的内容不一致时，才调用setItem。具体代码修改如下：

useEffect(() => {
  if (inputArr.length > 0) {
    // 获取本地存储的现有数据并解析
    const storedArr = JSON.parse(window.localStorage.getItem("inputArr") || "[]");
    // 比较内容是否一致（转字符串比对是简单高效的方式，适合结构不复杂的数组）
    const isContentSame = JSON.stringify(inputArr) === JSON.stringify(storedArr);
    
    if (!isContentSame) {
      window.localStorage.setItem("inputArr", JSON.stringify(inputArr));
      console.log("set", inputArr);
    }
  }
}, [inputArr]);

补充说明 #

• 如果inputArr的结构比较复杂（比如包含嵌套对象、函数等），转字符串比对可能有误差，这时可以用深比较函数（比如自己实现一个基础的深比较逻辑）来替代字符串比对。
• 也可以在初始化inputArr的时候，直接复用localStorage读取的数组引用，避免刷新时创建新数组，但这种方式需要结合你的状态初始化逻辑调整，不如内容比对的通用性强。

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