useEffect localStorage 循环

Question

我正在尝试存储单个状态，但由于无限循环，我显然无法做到这一点。你能帮帮我吗？

import React, { useState, useEffect } from "react";

const App = () => {
  const [rows, setRows] = useState("Inicial State");

  function init() {
    const data = localStorage.getItem("my-list");
    if (data) {
      setRows(JSON.parse(data));
    }
    localStorage.setItem("my-list", JSON.stringify(rows));
  }

  useEffect(() => {
    init();
  });

  return (
    <div>
      <button onClick={() => setRows("Loaded state!")}>Load!</button>
      <div>{rows}</div>
    </div>
  );
};

export default App;

Answer 1

您每次调用 init() 组件 re-render。在此处记录如何使用 useEffect：https://reactjs.org/docs/hooks-effect.html。你应该只调用一次像 componentDidMount in class component by:

  useEffect(() => {
    init();
  }, []);

  useEffect(() => {
      localStorage.setItem("my-list", JSON.stringify(rows));
  }, [rows]);

Answer 2

如果您使用 useEffect 进行初始化，它需要有一个空的依赖数组以确保它只在第一个渲染上运行，而不是在每个渲染上运行：

 useEffect(() => init(), []);

useEffect localStorage 循环

useEffect localStorage loop

reactjs

react-hooks

state

persistence

use-effect