typescript useState，useMemo在浏览器刷新时保持重置值

b91juud3 于 2023-02-05 发布在 TypeScript

关注(0)|答案(2)|浏览(244)

我试着在学生考试成绩表上得到分数的总值。在保存更改时，我得到了正确的值。但在浏览器上刷新值为0。我使用了useEffect()和useMemo()钩子，但仍然得到相同的结果。但我使用了普通变量，（而不是useState()钩子），刷新后值保持不变。
下面是代码。

const englishSubmitted = JSON.parse(
    localStorage.getItem("englishSubmitted") as string
  );
 const [englishResult, setEnglishResult] = useState<
    { [key: string]: string }[]
  >([]);

  useEffect(() => {
    if (englishSubmitted) {
      setEnglishResult(
        JSON.parse(localStorage.getItem("englishAnswers") as string)
      );
    }
},[])

`// this does not work`
  useEffect(() => {
    const value = englishResult.reduce((acc, current) => {
      acc += parseInt(current.marks);
      return acc;
    }, 0);
    setEnglishMarks(value);
  }, []);

`//this does not work either`
  useMemo(() => {
    const value = englishResult.reduce((acc, current) => {
      acc += parseInt(current.marks);
      return acc;
    }, 0);
    setEnglishMarks(value);
  }, []);

在依赖项数组中放置值也不起作用。
但是下面的代码是有效的。value变量即使在刷新后仍保留其值

const value = englishResult.reduce((acc, current) => {
      acc += parseInt(current.marks);
      return acc;
    }, 0);

typescript

来源：https://stackoverflow.com/questions/75302301/usestate-usememo-keeps-reseting-value-on-browser-refresh

2条答案

按热度按时间

6ie5vjzr1#

但是下面的代码是有效的。value变量即使在刷新后仍保留其值

const value = englishResult.reduce((acc, current) => {
  acc += parseInt(current.marks);
  return acc;
}, 0);

这是我推荐的代码，无论如何，对于像这样的计算值，复制它到不同的状态只会使组件做额外的呈现和复杂的代码。
如果数组特别大，导致性能问题，那么如果没有任何变化，可以跳过计算，方法是执行useMemo，如下所示：

const value = useMemo(() => {
  return englishResult.reduce((acc, current) => {
    acc += parseInt(current.marks);
    return acc;
  }, 0);
}, [englishResult])

注意，不应该在useMemo中设置state，只返回值即可。

赞(0）回复(0）举报 2023-02-05

6g8kf2rb2#

您可以使用localStorage来实现这一点：例如：https://www.npmjs.com/package/easy-react-hooks

赞(0）回复(0）举报 2023-02-05