如何在React useEffect中不赋值变量使用Async/Await以避免未使用值警告

嘿，我完全懂你的需求——不想给异步函数赋值变量，消除“未使用值”的警告，同时保证异步请求正常执行对吧？你第二种写法的问题很明确：你只是定义了一个匿名异步函数，但根本没有调用它，所以请求压根没发出去，自然也达不到预期效果。

正确的实现方式：立即执行函数表达式（IIFE） #

你可以把这个匿名异步函数做成立即执行的，也就是定义完成后立刻调用，这样既不需要赋值给变量，也能让逻辑正常运行：

useEffect(() => {
  // 定义后立刻调用这个匿名异步函数
  (async () => {
    const res = await axios.get(`http://localhost:3001/posts/${postId}/comments`);
    setComments(res.data);
  })();
}, [postId]);

这里的()包裹异步函数后再加()，就是告诉JS引擎“定义完这个函数马上执行它”，没有多余的变量声明，自然不会触发未使用值的警告，同时异步请求也能正常发起。

额外建议：加上错误处理 #

异步请求难免会失败，最好给逻辑加上try/catch来捕获错误，避免页面静默崩溃：

useEffect(() => {
  (async () => {
    try {
      const res = await axios.get(`http://localhost:3001/posts/${postId}/comments`);
      setComments(res.data);
    } catch (error) {
      console.error('加载评论出错了:', error);
      // 这里可以根据需求设置错误状态，比如 setError(error.message)
    }
  })();
}, [postId]);

避坑提醒：不要直接把useEffect回调改成async #

千万别尝试直接这样写：

// ❌ 错误写法！
useEffect(async () => {
  const res = await axios.get(...);
  setComments(res.data);
}, [postId]);

因为useEffect的回调函数如果是async的，会返回一个Promise，而React期望useEffect的回调要么返回清理函数，要么什么都不返回。返回Promise会导致React无法正确处理组件卸载时的清理逻辑，可能引发内存泄漏或者警告。

这样写就完全满足你的需求啦——没有多余变量、警告消失、请求正常执行，还更健壮！

内容的提问来源于stack exchange，提问作者Kiruaaa