设置后反应状态为空

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

这里有三件事。首先，当您的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]);

使用此钩子记录数据