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

【问题标题】：useEffect() leads to infinite loop on api calluseEffect() 导致 api 调用无限循环
【发布时间】：2021-06-12 00:08:23
【问题描述】：

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

这个组件从父 props.measurementsArray 接收一个 prop，它发送到 useEffect 中的 API，将结果存储在 state (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 (...)

困难在于我在useEffect 中设置了centile_data，这会导致组件重新渲染，从而创建一个循环。传入 linter (as per the documentation) 或 [] 建议的依赖项无效。如果有人能纠正我所犯的嚎叫错误，我将不胜感激。

【问题讨论】：

标签： asynchronous react-hooks use-effect

【解决方案1】：

所以我很抱歉。事实证明，这段代码很好，但是在树的更下方的组件中出现了错误。给我上一堂人生课，很抱歉浪费时间。

【讨论】：