javascript - 设置后React状态为空

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 block ，并使用现有的 .then 代码，并添加 .catch来捕获任何错误。

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

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