设置后反应状态为空答案

【问题标题】：React state is empty after setting设置后反应状态为空
【发布时间】：2021-05-28 14:10:52
【问题描述】：

我有一个简单的 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 给了我实际数据。而且我不知道可能是什么问题。

【问题讨论】：

做setFetchData(jsonData) & console.log(jsonData)你实际上是在执行最后一个条件，它是console.log，尝试删除它，它会是setFetchData(jsonData)。
@AdriSolid 感谢您的想法。这就是我开始的，我刚刚添加了控制台日志以显示jsonData 中有数据，但很高兴知道setFetchData 没有执行。但是删除后的结果还是一样的。

标签： javascript reactjs fetch next.js react-state-management

【解决方案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)
});

【讨论】：

感谢您在我将fetchData 添加到 useEffect() 依赖项列表时，它会打印控制台日志。唯一的问题是它创建了无限循环，因为 getDataNames() 更改了 fetchData 所以它一次又一次地被调用。并感谢其他两件事对我帮助很大:)
@Michaelo haha 是的，确实会发生，但这只是因为您设置代码的方式。效果调用该 API 并设置状态，但路由器的东西不会改变，所以它会继续发生。您可能需要重新排列逻辑，以使代码的因果链正确且没有循环。或者，获取的数据可能首先不需要在效果的依赖项列表中 - 但如果没有更多的代码/上下文和所需的用例解释，我不能说。

【解决方案2】：

 useEffect(() => {

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

使用此挂钩记录您的数据

【讨论】：