如何修复使用React Hook的useEffect与useParams时的依赖缺失警告

你刚进入开发领域学习JavaScript，在做React项目时尝试用useParams获取id，再通过useEffect调用接口获取对应todo数据，但控制台抛出错误：

Line 17:6: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps

你的代码如下：

import React from 'react'
import { useParams, useEffect, useState } from 'react'
import axios from "axios";
import './App.css';
const Todo = () => {
  const [todoDetails, setTodoDetails] = useState();
  const { id } = useParams();
  useEffect(() => {
// I wanted to fetch the data for the specific id from the jsonPlaceholder url to practice 

    axios
      .get(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then((res) => {
        const responseTodo = res.data;
        setTodoDetails(responseTodo);
      });

  }, [])//the console said the error is here but i don't know what to do 
// the error is "  Line 17:6:  React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array  react-hooks/exhaustive-deps"
  const { id: todoId, userId, title, completed } = todoDetails || {}
  return (
    <div>{`this is the todoes componets and the id is  ${todoId} , ${userId}, ${title}, ${completed}`}</div>
  )
}
export default Todo;

错误原因 #

React的useEffect有严格的依赖检查规则：effect函数内部用到的所有外部变量（比如这里的id）都必须加入到依赖数组中。如果不添加，当id发生变化时，effect不会重新执行，导致你拿到的还是旧id对应的数据，甚至可能引发其他bug。

解决方法 #

1. 把id加入依赖数组（最规范的做法） #

直接修改useEffect的依赖数组，把id加进去，这样每当id变化时，effect会自动重新执行，获取对应id的最新数据：

useEffect(() => {
  axios
    .get(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((res) => {
      const responseTodo = res.data;
      setTodoDetails(responseTodo);
    });
}, [id]) // 这里加入id

2. 额外优化建议 #

• 处理请求取消：防止组件卸载后还执行状态更新，避免内存泄漏
• 设置初始状态：把useState的初始值设为{}，减少解构时的判断
• 添加加载/错误状态：提升用户体验

优化后的完整代码：

import React from 'react'
import { useParams, useEffect, useState } from 'react'
import axios from "axios";
import './App.css';

const Todo = () => {
  const [todoDetails, setTodoDetails] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const { id } = useParams();

  useEffect(() => {
    // 创建取消令牌
    const source = axios.CancelToken.source();

    const fetchTodo = async () => {
      try {
        const res = await axios.get(`https://jsonplaceholder.typicode.com/todos/${id}`, {
          cancelToken: source.token
        });
        setTodoDetails(res.data);
        setError('');
      } catch (err) {
        // 判断是否是主动取消的请求
        if (!axios.isCancel(err)) {
          setError('获取数据失败，请稍后重试');
        }
      } finally {
        setLoading(false);
      }
    };

    fetchTodo();

    // 组件卸载时取消请求
    return () => {
      source.cancel('组件已卸载，取消请求');
    };
  }, [id])

  const { id: todoId, userId, title, completed } = todoDetails;

  if (loading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;

  return (
    <div>
      <h2>Todo 详情</h2>
      <p>ID: {todoId}</p>
      <p>用户ID: {userId}</p>
      <p>标题: {title}</p>
      <p>完成状态: {completed ? '已完成' : '未完成'}</p>
    </div>
  )
}

export default Todo;

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