如何在next.js中从localStorage获取数据时停止无限循环？

Question

当我在 useEffect Hook 中从 localStorage 获取数据并传递 dependency [] 空白时。它可以很好地获取数据，但无法获取新数据。要获取它，需要刷新页面。当我传递依赖项[数据]（获取的数据状态）时，它开始无限循环。

这是我的实际代码。我已在 useEffect 中传递了 [data] 依赖项，以便在添加新数据时获取。但它开始无限循环。

const LocalStorage = () => {
  const [data, setData] = useState([]);
  const [id, setId] = useState();
  const [name, setName] = useState();
  const [city, setCity] = useState();

  const handleSubmit = () => {
    console.log(id, name, city);

    const userInput = [...data, { id: id, name: name, city: city }];
    localStorage.setItem("user", JSON.stringify(userInput));

    setId("");
    setName("");
    setCity("");
  };

  useEffect(() => {
    const fetchedData = localStorage.getItem("user");
    const dataObject = JSON.parse(fetchedData);
    setData(dataObject);
  }, [data]);

Answer 1

在 useEffect 中，您正在修改并依赖于同一 useEffect() 中的数据。这会导致无限循环。我相信你想要做的是要么监听 localStorage 要么只在 handleSubmit 中调用 setData 。

例如：

const LocalStorage = () => {
  const [data, setData] = useState([]);
  const [id, setId] = useState();
  const [name, setName] = useState();
  const [city, setCity] = useState();

  const handleSubmit = () => {
    console.log(id, name, city);

    const userInput = [...data, { id: id, name: name, city: city }];
    localStorage.setItem("user", JSON.stringify(userInput));
    setData(userInput);

    setId("");
    setName("");
    setCity("");
  };

  useEffect(() => {
    const dataObject = JSON.parse(data);
  }, [data]);
};

以下是监听 localStorage 的方法： 如何在react中监听localstorage值变化？