reactjs - 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;

标签： reactjsreact-hooksstatepersistenceuse-effect

Answer 1

每次组件重新渲染时都调用 init()。在此处记录如何使用useEffect：https ://reactjs.org/docs/hooks-effect.html 。componentDidMount您应该只像在类组件中那样调用一次：

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

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