我使用下面的结构使用axios获取数据
export const PostScreen = ({route, navigation}) => {
const [isLoading, setIsLoading] = React.useState(true);
const [data, setData] = React.useState();
const {id, title} = route.params;
navigation.setOptions({
title: title
});
React.useEffect(() => {
axios.get('https://6420bd1382bea25f6d0666b6.mockapi.io/test/' + id)
.then(({data}) => {setData(data)})
.catch(e => Alert.alert('Error', 'Error'))
.finally(() => {
setIsLoading(false);
});
}, []);
console.log(data)
if(isLoading) {
return <Loading/>
}
return (
<View>
<PostImage source={{uri: data.imageUrl}}/>
<PostText>{data.text}</PostText>
</View>
);
}当输出到控制台时，首先显示undefined，然后显示数据2次，axios是否发出3次请求？应用程序按预期工作，但我当时感到困惑。我不希望向服务器发出2个额外的请求
我希望这只是我对axios工作原理的误解，你可以解释给我听。提前谢谢你！
1条答案
按热度按时间fdbelqdn1#
Axios有3个请求吗？
在浏览器的调试工具中，在网络选项卡上，您观察到该请求的多少个示例？这就是正在发出的请求的数量。
后退一步，观察显示的代码有 * 更多 * 比 * 只是Axios*.你似乎是在假设 * 整个事情 * 是“Axios”，而这根本不是事实.你在这里有 * 一个React组件 *.和 * 一件事 * React组件做的是通过Axios调用HTTP请求.
React组件在每次渲染时做的另一件事是：
这与Axios请求 * 完全分离且无关 *。两者 * 毫无 * 关系。这行代码所做的一切就是将
data的当前值输出到控制台。每次组件呈现时，它都会这样做。因此，当组件初次呈现时，它会输出一个值 * 至少一次 *。在那之后，什么会导致组件重新呈现？状态改变。例如，这个：
和/或这一个：
由于这两个状态更新发生在Promise链的不同回调中，因此组件很可能在这两个操作之间重新渲染。您可以通过同步排队两个状态更新来将其减少为 one re-render：
状态更新本身仍然是异步的，但是同步排队多个更新将导致它们被批处理，并且仅触发组件的一次重新呈现。