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（）。在https://reactjs.org/docs/hooks-effect.html此处记录如何使用useEffect。您只能通过以下方式在类组件中像componentDidMount那样调用一次：

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

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

Answer 2

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

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