React中点击按钮存LocalStorage，首次点击无法保存首个元素

我明白你遇到的困扰了——首次点击按钮时，新添加的元素压根没存进localStorage，后续点击也补不上第一个元素。这其实是React的setState异步特性在“搞鬼”，咱们一步步拆解解决：

问题根源 #

你当前的代码里，调用setInfo更新状态后立刻去存info到localStorage，但setState是异步操作，这时候info还是更新前的旧值（首次点击时就是空数组），所以存进localStorage的自然还是空的，新元素根本没被包含进去。

解决方案 #

这里有两种实用的解决方式，你可以选顺手的来：

方式一：用setState的回调函数拿最新状态 #

React的setState支持传入回调函数，这个函数的参数是更新后的最新state，我们在回调里操作localStorage，就能确保拿到的是带新元素的数组：

const add = () => {
  if(website){
    setInfo(prevInfo => {
      // 先构建好包含新元素的数组
      const newInfo = [...prevInfo, {website: website, password: generate()}];
      // 直接用最新的newInfo存localStorage
      localStorage.setItem("data", JSON.stringify(newInfo));
      // 返回新数组更新状态
      return newInfo;
    })
  }
}

方式二：先手动创建新数组，同步更新状态和存储 #

如果觉得回调写法有点绕，也可以先自己构建好新数组，再用这个数组同时更新状态和存localStorage，彻底避开异步状态的坑：

const add = () => {
  if(website){
    const newInfo = [...info, {website: website, password: generate()}];
    setInfo(newInfo);
    localStorage.setItem("data", JSON.stringify(newInfo));
  }
}

额外优化：页面刷新不丢数据 #

顺便提个小优化，组件初始化时把localStorage里的数据读出来作为state的初始值，这样刷新页面后之前存的数据也不会消失：

const [info, setInfo] = useState(() => {
  const savedData = localStorage.getItem("data");
  // 有数据就解析成数组，没有就用空数组
  return savedData ? JSON.parse(savedData) : [];
});

这样修改后，不管是首次点击还是后续操作，新元素都会乖乖存进localStorage啦~

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