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

问：

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

这是我的实际代码。我已经在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]);

reactjs next.js 无限循环

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 值的变化？

上一个：为什么我的 while（Scanner.hasNext（））循环永远不会退出？

下一个：在 R Shiny 中使用观察的无限循环

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

How to Stop infinite loop while fetching data from localStorage in next.js?

评论