反应 useEffect 与依赖数组仍然循环

Question

我正在努力思考 useEffect 钩子。据我所知，如果挂钩中包含依赖项数组，则只有在该特定状态发生变化时才会产生运行效果，但我无法让它工作。每次我添加依赖数组时，它都会无限循环。


    useEffect(() => {

      axiosWithAuth()
        .get(`/api/parent/children/${id}`)
        .then(response => {
          // console.log('API response: ', response);
          // console.log('childs data: ',response.data);
          setData(response.data)
          // console.log('new data: ', data);
        });
      .catch(err => console.log(err));
    }, [data]);

如果我从依赖数组中提取数据，它工作正常，没有循环。前提是，如果用户单击 child 的名称，它会显示该 child 的数据（这是我正在处理的 chore-tracker）所以我会假设（我可能是错的）...

我想我可能已经自己回答了这个问题，但我想得到一些确认：

我需要为 child 设置一个状态片段，如果那个状态发生变化，那么效果运行s.. 所以.. 像这样..


    const {data, setData} = useState([]);
    const {child, setChild} = useState('');

      useEffect(() => {

        axiosWithAuth()
          .get(`/api/parent/children/${id}`)
          .then(response => {
            // console.log('child list response: ', response);
            // console.log('childs data length',response.data.length);
            // console.log('childs data',response.data);
            setData(response.data)

            // console.log('new data: ', data);
          });
          .catch(err => console.log(err));
      }, [child]);

我的想法是否正确，我需要那样做而不是我原来的方式？

Answer 1

是的，你做得很好。但是对于这类问题更好的答案是：

useEffect(() => {
        axiosWithAuth()
          .get(`/api/parent/children/${id}`)
          .then(response => {
            // console.log('child list response: ', response);
            // console.log('childs data length',response.data.length);
            // console.log('childs data',response.data);
            setData(response.data)

            // console.log('new data: ', data);
          });
          .catch(err => console.log(err));
} , []})

当您将一个空数组传递给 useEffect 时，它只运行一次

反应 useEffect 与依赖数组仍然循环

react useEffect with Dependency Array still looping

javascript

reactjs

use-effect