UseEffect在使用sessionStorage时不会触发sessionStorage

Question

嘿，我的密码出问题了。

const [itemsCart, setCart] = useState([]);
  useEffect(() => {
    (async function (){
      const buffer = await JSON.parse(window.sessionStorage.getItem("itemsCart"))
      setCart(buffer);
      console.log(buffer);
      console.log(itemsCart);
    })()
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("itemsCart", JSON.stringify(itemsCart));
  }, [itemsCart]);

缓冲区获取数据，状态变量没有。我假设同步肯定有问题，但是我无法修复。输出：这里

Answer 1

之所以会发生这种情况，是因为react会等到调用useEffect中的所有脚本之后，setState才会触发重发程序。因为可以有多个setStates，而且我们只想重新修改它一次。这意味着，您是在console.log(itemsCart)中记录旧值，而不是在rerender之后它实际存在之前。

在更新useEffect之前，您可以使用第二个sessionStorage对其进行登录，您将看到状态发生了更改。也可以为此创建新的useEffect。

useEffect(()=>{
 console.log(itemsCart)
},[itemsCart]);

Answer 2

这样做是可行的：

const [itemsCart, setCart] = useState(JSON.parse(window.localStorage.getItem("itemsCart")));

  useEffect(() => {
    console.log(itemsCart);
    window.localStorage.setItem("itemsCart", JSON.stringify(itemsCart));
  }, [itemsCart]);

Answer 3

要运行第二个useEffect()，需要在通过useState()之前修改itemsCart。当你打电话给useEffect()时，我看不见你的第一个setItemsCart()。