有条件地调用 React Hook “useEffect”。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks答案

【问题标题】：React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render有条件地调用 React Hook “useEffect”。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks
【发布时间】：2020-11-27 08:25:16
【问题描述】：

export const FetchDailyData = () => {
  try {

    const [data, setData] = useState({ numbers: [], isFetching: false });

    useEffect(() => {
        const fetchData = async () => {
            setData({ ...data, isFetching: true });
            const response = await axios.get(`${apiURL}/daily`);
            setData({
                ...data,
                numbers: response.data.slice(0, 50),
                isFetching: false
            });
        };
        fetchData();
    }, [data]); 

    console.log(`data= ${data.numbers} isFetching= ${data.isFetching}`);

  } catch (error) {
    if (error) throw error;
    console.log(error);
    setData({ ...data, isFetching: false });
  }
}

谁能帮我解决这个问题？我试图获取 api 数据，但我无法处理这个错误。

【问题讨论】：

为什么要把整个函数体包围在一个 try/catch 中？应该只包装引发错误的最少代码。另外，FetchDailyData 是什么？它不是一个功能组件，它是一个自定义的反应钩子吗？您能否更新问题以包含调用者的代码（即FetchDailyData 的使用位置和方式）？
这能回答你的问题吗？ Is it possible to place useEffect inside a if statement?

标签： reactjs react-native react-redux react-router react-hooks

【解决方案1】：

您不能将useEffect 包装在任何可能导致它无法运行的东西中，包括try/catch。看看你在做什么，这可能是一个更好的选择：

export const FetchDailyData = () => {
    const [data, setData] = useState({ numbers: [] });
    const [fetching, setFetching] = useState(false);
    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get(`${apiURL}/daily`);
            setData({
                ...data,
                numbers: response.data.slice(0, 50),
            });
        }
        try {
            setFetching(true);
            fetchData();
        } catch (error) {
            console.error(error);
        } finally {
            setFetching(false);
        }
    }, [data]); 
}

【讨论】：

【解决方案2】：

由于您的 useEffect 调用位于 try/catch 内，因此效果可能无法在给定的渲染上运行。它取决于是否有东西抛出。 Hooks 必须在每个渲染中以相同的顺序运行——我认为这与 React 如何在内部跟踪它们有关——并且try/catch 使得该调用可以被跳过。

如果您只是担心 fetch 抛出，请将 try/catch 移动到钩子内，而不是相反。

【讨论】：