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

Question

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数据，但这个错误我无法处理。

Answer 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]); 
}

Answer 2

因为useEffect调用在try/catch内部，所以效果可能不会在给定渲染上运行。这取决于是否有东西投掷。钩子在每个渲染中必须以相同的顺序运行——我认为这与React如何在内部跟踪它们有关——而try/catch使该调用可以被跳过。

如果你只是担心接球投掷，把尝试/接球移到钩子里，而不是反过来。