Question

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

该组件从父 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) 或 [] 建议的依赖项无效。如果有人能让我直截了当地说明我犯的错误，我将不胜感激。

Answer 1

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

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

1 个答案: