Question

我有一个简单的 nextjs 应用程序，我想将状态保存并打印到 fetchData

这是我的代码

const Room = () => {
  const router = useRouter();
  const [fetchData, setFetchData] = useState("");

  useEffect(() => {
    if (router.asPath !== router.route) {
      getDataNames();
      console.log(fetchData); // Empty
    }
  }, [router]);

  const getDataNames = async () => {
    try {
      await fetch("http://localhost:1337/rooms?_id=" + router.query.id)
        .then((response) => response.json())
        .then((jsonData) => setFetchData(jsonData) & console.log(jsonData)); // Data are logged in console
    } catch (e) {
      console.error(e);
    }
  };

问题是控制台日志上的 fetchData 为空，但 jsonData 给了我实际数据。我不知道有什么问题。

Answer 1

好的，这里有 3 件事。首先，当您的 useEffect 值更改时，您的 fetchData 不会重新运行。您需要将其添加到依赖项列表中：

  useEffect(() => {
    if (router.asPath !== router.route) {
      getDataNames();
      console.log(fetchData); // Empty
    }
  }, [router, fetchData]);

这样效果就会在 fetchData 变化时运行。当然，如果满足效果中的条件，它只会console.log。

其次，您混合使用 async/await 和 .then/.catch 语法，不要那样做。使用其中之一。在这种情况下，您只需删除 await 关键字和 try/catch 块，并使用现有的 .then 代码，并向其添加 .catch 以捕获任何错误。

最后，Javascript 中的 & 是按位 AND 运算符，所以不确定你为什么在那里使用它。如果您认为它的意思是“并且也这样做”，那么这是不正确的。只需将 .then 函数放在大括号内，然后一个接一个地调用 setFetchData 和 console.log 语句：

.then((jsonData) => {
    setFetchData(jsonData);
    console.log(jsonData)
});

Answer 2

 useEffect(() => {

      console.log(fetchData);
    
  }, [fetchData]);

使用这个钩子记录你的数据

设置后反应状态为空

2 个答案: