设置后反应状态为空

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 件事。首先，当您的 fetchData 值更改时，您的 useEffect 不会重新运行。您需要将其添加到依赖列表中：

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

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

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

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

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

Answer 2

 useEffect(() => {

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

使用此挂钩记录您的数据

设置后反应状态为空

React state is empty after setting

javascript

reactjs

fetch

next.js

react-state-management