对本地存储的第一次点击状态未更新和延迟时作出React

iklwldmw 于 2022-09-21 发布在 React

关注(0)|答案(1)|浏览(166)

const [storageValue, setStorageValue] = useState(() => JSON.parse(localStorage.getItem('productCardsId')) || []);

  const localStoreHandler = productId => {
    setStorageValue(prevValue => [productId, prevValue?.[0]]);
    localStorage.setItem('productCardsId', JSON.stringify(storageValue));
  };

当我将setStorageValue设置为第一个值时，我只得到一个空数组。在第二次点击之后，我得到了值，但延迟了。如何在第一次点击时更新状态？谢谢。

reactjs

来源：https://stackoverflow.com/questions/73792317/react-on-first-click-state-not-updated-and-delayed-for-localstorage

1条答案

按热度按时间

oxiaedzo1#

setStorageValue是一个异步操作，因此localStorage.setItem('productCardsId', JSON.stringify(storageValue));将收到第一个过时的值。有两种选择：一种是在状态更新中更新localStorage，或者使用一个钩子来检测值的更改并相应地更新localStorage。

选项1

setStorageValue(prevValue => {
  const nextValue = [productId, prevValue?.[0]]
  localStorage.setItem('productCardsId', JSON.stringify(nextValue));
  return nextValue
});

备选案文2

const localStoreHandler = productId => {
  setStorageValue(prevValue => [productId, prevValue?.[0]]);
};

useEffect(() => {
  localStorage.setItem('productCardsId', JSON.stringify(storageValue));
}, [storageValue])

赞(0）回复(0）举报 2022-09-21

我来回答

对本地存储的第一次点击状态未更新和延迟时作出React

1条答案

相关问题

热门标签

最新问答