Javascript 如何修复最大更新深度超出错误？

我有一个组件FetchData，我从中将数据传递给consumerdata组件，但是在FetchData中制作axios时，我开始得到一个错误最大更新深度超过错误

FetchData.js

//Some imports

import axios from axios;

const FetchData = () => {
     const [userName, setUserName] = useState("");
     const [userData, setUserData] = useState("");


     useEffect(() => {

      //making an axios call
      axios.get("http://someURl", config)
      .then(userDetailData => {

      //extracting userName
      const userNameExt = userDetailData.user.userName;
     setUserName(userNameExt)

     const userDataFromRes = userDetailData.user.data;
    if(userDetailData.length === 0) {
     console.log("emptyData")
     } else {
        userDataFromRes.map((item) => (
           //Manipulating the userDataFromRes according to need
        ))
       setUserData(userDataFromRes)
     }
    }
    },[])

    return {userName, userData}
}

export default FetchData 

//Some imports
import FetchData from '../../FetchData';

const ConsumeData = () => {

cosnt {userName, userData} = FetchData();

console.log(userName, userData)

return (
   <div>
   //some code
 </div>
)
}

export default ConsumeData 

在组件ConsumerData中，我使用的是用户名和用户数据

consumerdata.js

//Some imports

import axios from axios;

const FetchData = () => {
     const [userName, setUserName] = useState("");
     const [userData, setUserData] = useState("");


     useEffect(() => {

      //making an axios call
      axios.get("http://someURl", config)
      .then(userDetailData => {

      //extracting userName
      const userNameExt = userDetailData.user.userName;
     setUserName(userNameExt)

     const userDataFromRes = userDetailData.user.data;
    if(userDetailData.length === 0) {
     console.log("emptyData")
     } else {
        userDataFromRes.map((item) => (
           //Manipulating the userDataFromRes according to need
        ))
       setUserData(userDataFromRes)
     }
    }
    },[])

    return {userName, userData}
}

export default FetchData 

//Some imports
import FetchData from '../../FetchData';

const ConsumeData = () => {

cosnt {userName, userData} = FetchData();

console.log(userName, userData)

return (
   <div>
   //some code
 </div>
)
}

export default ConsumeData 

//一些导入
从“../../FetchData”导入FetchData；
const consumerdata=（）=>{
cosnt{userName，userData}=FetchData（）；
console.log（用户名、用户数据）
返回(
//一些代码
)
}
导出默认数据

---

正在寻找如何修复最大更新深度超出错误的解决方案。

如果有帮助，请检查此选项，这意味着您在渲染过程中无条件更新某些状态，这将导致无限重渲染循环。这里显示的代码中可能没有问题。当您调用回调而不是将引用作为道具向下传递时，通常会发生这种情况。除了

FetchData

之外，还应将其命名为

useFetchData

，因为它是一个自定义挂钩，我在这个代码段中没有看到任何明显的问题。钩子只有挂载效果，所以渲染此钩子的唯一方法是使用它不断地重新挂载组件。您是否有错误消息和stacktrace可供查看？@DrewReese完整错误：index.js:1警告：超出最大更新深度。当组件在useEffect内部调用setState时，可能会发生这种情况，但useEffect要么没有依赖项数组，要么每个渲染中的一个依赖项都会更改。