为什么useEffect在这里不起作用?我需要改变条件吗

Question

我正在尝试运行此代码，但useEffect一次也没有运行。

export default function DetailPage() {
const [post, setPost] = useState({});
const postId = useParams().postId;
console.log(postId);
useEffect(() => {
console.log("useEffect called");
const fetchPost = async () => {
const res = await axios.get(`/posts/${postId}`);
setPost(res.data);
console.log(post);
console.log("useEffect runs");
};
fetchPost();
console.log("useEffect runs 2 ");
}, [postId]);
}

在这里，我在控制台中获得postId，但不是"；useEffect运行"；。

我在另一个文件中使用了类似的代码(只是我在那里使用了另一个变量而不是postId(，它在那里工作。请帮我处理这个代码。

Answer 1

请注意，当您使用setState时，您的状态值是异步更改的。所以在你看来，这个状态似乎没有改变，但在现实中，它会改变。这是因为当您试图在setState之后打印状态的值时，其值仍然没有更新。当您想使用控制台日志调试状态如何更改时，请创建一个单独的挂钩来记录每个更改。

添加如下内容：

useEffect(()=>{
console.log("Post state changed!")
console.log(post);
},[post])

关于上次日志(console.log("useEffect runs");(未运行的问题，唯一可能的问题是：

1. postId的更改不会触发useEffect(可能的原因：您在useParams中使用ref来存储值(。要进行检查，只需在运行Axios请求之前放入console.log：

const fetchPost = async () => {
//Does this ever display your postId? If it does go to point 2.
console.log(`Trying to fetch post ${postId}`); 
//Furthermore if postId can be undefined I'll wrap this request with an if
const res = await axios.get(`/posts/${postId}`);
setPost(res.data);
console.log("useEffect runs");
};

2. 您的网络请求中存在未捕获的错误

第一个提示：在等待Axios响应时，始终放置try-catch块。

这将避免丢失未捕获的错误。

try {
const res = await axios.get(`/posts/${postId}`);
setPost(res.data);
} catch(e) {
//Here log your error. Remember to avoid showing the log in production
}

使用Axios时，我也总是建议查看浏览器的网络选项卡，了解您的请求是怎么回事。

我给你链接了一篇帖子，解释如何做到这一点：https://stackoverflow.com/a/66232992/14106548