Question

每次单击按钮，我都会调用此功能。

问题是，第一次单击按钮时，直到下次单击时，它才保存第一个元素所以第一个元素永远不会被保存

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

状态信息：

const[info,setInfo]=useState([])

Answer 1

setInfo函数将异步更新状态，因此当您调用localStorage.setItem函数并传递info时，info数组尚未更新。

您可以创建一个数组并将其传递给setInfo和setItem函数。这样，在将状态保存到setInfo

之前，不必依赖localStorage函数来更新状态。

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

Answer 2

setInfo更改将在下一个渲染中可用。您应该在单独的变量中计算值，然后进行设置。

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

Answer 3

setInfo，即setState是异步的。您需要为此使用useEffect。

    useEffect(() => {
        localStorage.setItem('state', JSON.stringify(info));
    }, [info]); // run whenever info is changed

每次更改状态info时，都会进入useEffect块并更新本地存储。

将状态保存到本地存储中以做出反应

3 个答案: