useEffect() 导致 api 调用无限循环

大佬教程收集整理的这篇文章主要介绍了useEffect() 导致 api 调用无限循环，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决useEffect() 导致 api 调用无限循环？

开发过程中遇到useEffect() 导致 api 调用无限循环的问题如何解决？下面主要结合日常开发的经验，给出你关于useEffect() 导致 api 调用无限循环的解决方法建议，希望对你解决useEffect() 导致 api 调用无限循环有所启发或帮助；

我已阅读所有文档，发现了与我类似的情况，但从未找到适用的解决方案。

该组件从父 props.measurementsArray 接收一个 prop，它发送到 useEffect 中的 API，将结果存储在状态 (setCentile_data) 中。测量数组由对象（每个包含增长数据）组成，我遍历数组，为每个对象进行 API 调用，将结果添加到 centile_data。

function ChartData(props) {

  const [isLoading,setLoading] = useState(true);
  const [centile_data,setCentile_data] = useState([]);

  const measurementsArray = props.measurementsArray;
  const reference = props.reference;

  useEffect(() => {
    const fetchCentilesForMeasurement = async  (payload,referencE) =>{
    
      let url
      if (reference === "uk-who"){
        url = `${process.env.REACT_APP_GROWTH_API_BASEURL}/uk-who/calculation`
      }
      if (reference === "turner"){
        url = `${process.env.REACT_APP_GROWTH_API_BASEURL}/turner/calculation`
      }
      if (reference === "trisomy-21"){
        url = `${process.env.REACT_APP_GROWTH_API_BASEURL}/trisomy-21/calculation`
      }
  
      const response = await axios({
        url: url,data: payload,method: "POST",headers: {
          "Content-Type": "application/Json",},});
  
      return response.data;
    }

    let ignore = false; // this prevents data being added to state if unmounted
    if (measurementsArray.length > 0) {
      try {
        measurementsArray.forEach(measurement => {
          fetchCentilesForMeasurement(measurement,referencE).then((result) => {
            if (!ignorE) {
              // this prevents data being added to state if unmounted
              setCentile_data(centile_data => [...centile_data,result])
            }
          }).then(()=>{
            setLoading(false)
          }).catch((error)=>{
            console.log(error.messagE);
            setCentile_data([])
            setLoading(false)
          });
        });
      } catch (error) {
        console.error("Failure!");
        console.error(error.response.status);
        alert("The server is not responding. Sorry.");
        if (!ignorE) {
          setLoading(false);
        }
      }
    } else {
      if (!ignorE) {
        setLoading(false);
      }
    }
    return () => {
      ignore = true;
    }; // this prevents data being added to state if unmounted
  },[]);

render (...)

难点在于我在 centile_data 中设置了 useEffect，这会导致组件重新渲染，从而创建一个循环。传递由 linter (as per the documentation) 或 [] 建议的依赖项无效。如果有人能让我直截了当地说明我犯的错误，我将不胜感激。

解决方法

大佬总结

以上是大佬教程为你收集整理的useEffect() 导致 api 调用无限循环全部内容，希望文章能够帮你解决useEffect() 导致 api 调用无限循环所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。