React Hook useEffect 存在缺失的依赖项: 'props'

Question

我尝试使用React Hooks（这是我第一次使用），但当像componentDidMount一样使用useEffect时，会出现以下错误：“React Hook useEffect的依赖项缺失：'props'。要么将其包含在内，要么删除依赖项数组。但是，'props'将在任何 prop更改时改变，因此首选修复方法是在useEffect调用外部解构'props'对象，并在useEffect中引用那些特定的props。

我正在尝试向API发出GET请求，需要在url中传递一些props。这是我的代码：

function SomeComponent(props) {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${props.obj.id}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        props.totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, []);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我一直在寻找并尝试这些解决方案，但它们对我无效：

const { id } = props.obj.id;
const {totalStats} = props.totalStats

useEffect(()=>{
//Here is the code
//I replace the $ {props.obj.id} by the id and the function props.totalStats by //totalStats
},[id,totalStats]

我用那种方法得到了id和调用函数的未定义。

然后我尝试这样做：

useEffect(()=>{
//here is the code like the first one

},[props])

但这会向 API 发送n个请求

- Dfor

---

我认为你不需要将props放在依赖数组中... - evolutionxbox

是的，但这就是我在第一段代码中所做的，然后我得到了这个错误：React Hook useEffect缺少依赖项：'props'。要么包含它，要么删除依赖项数组。但是，当任何 prop更改时，'props'将发生变化，因此首选的修复方法是在useEffect调用之外解构'props'对象，并在useEffect内引用那些特定的props。 - Dfor

也许这个能帮到你？https://dev59.com/vVMI5IYBdhLWcg3wlMhZ - evolutionxbox

是的，那个帮了我，我按照那个做后得到了那个错误。 - Dfor

Answer 1

将常量导入中的大括号删除。

因此，它应该看起来像这样：

function SomeComponent(props) {
  const objId = props.obj.id;
  const totalStats = props.totalStats;
  
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [hasError, setErrors] = useState(false);
  
  useEffect(() => {
    async function fetchData() {
      try {
        let response = await Axios.get( `/some-url/${objId}/abc`,
          
        );
        let { data } = response.data;
        setData(data);
        setLoading(false);
        totalStats({data });
      } catch (error) {
        setErrors(error);
        setLoading(false);
      }
    }
    fetchData();
  }, [objId, totalStats]);
}

- Yunus Tabakoglu

---

请描述您所做的事情，以便原帖作者和其他人可以看到引起错误的原因。 - Ryan Wheale

Answer 2

答案已经被接受了，但是为了澄清为什么OP的解决方案一开始没有起作用，不是因为赋值常数。而是因为OP在解构属性时犯了一个错误。正确的做法是：

const { id } = props.obj;
const {totalStats} = props

注意我没有放置props.object.id或者props.totalStats。因为如果你这样做，实际上你是在尝试从props.object.id对象中解构出id。以及从props.totalStats中解构出totalStats。而这些属性并不存在，所以OP会得到未定义的错误。

你也可以像被接受的答案那样从props对象中分配一个常量。这实际上是一样的事情。

- osmancakirio