React Native Possible Unhandled Promise Error with axios

Question

我正试图用axios获取两个不同的api，并在不同的平面上使用它

我得到这个错误：

[未处理的承诺拒绝：错误：请求失败，状态代码429]

可能未处理的承诺拒绝(id:28(

这是我的代码

const [data, setData] = React.useState([]);
const [data1, setData1] = React.useState([]);

axios.all([
axios.get('https://jsonplaceholder.typicode.com/nation'),
axios.get('https://jsonplaceholder.typicode.com/state')
])
.then(responseArr => {
setData(responseArr[0].data);
setData1(responseArr[1].data);
});

return (
<View style={styles.container}>
<View >
<FlatList 
data={data}
listKey="nation"
keyExtractor={item => item.id}
showsVerticalScrollIndicator = {false}  
renderItem={({item}) => {
return (
<View>
<Text>{item.event_id}</Text> 
</View>
)
}}
/>
</View>
<View style={{ marginTop: 30 }}>
<FlatList 
data={data1}
listKey="state"
keyExtractor={item => item.id}
showsVerticalScrollIndicator = {false}  
renderItem={({item}) => {
return (
<View>
<Text>{item.venue_id}</Text> 
</View>
)
}}
/>
</View>

</View>
);
};

感谢的帮助

Answer 1

您收到一个HTTP 429错误代码，意思是：

HTTP 429 Too Many Requests响应状态代码指示用户在给定时间内发送了太多请求("速率限制"(。

您调用API的次数太多，发生的情况是：

调用

• axios
• 执行setData()并更新状态变量
• 重新转发器导致axios再次运行
• 祝贺你，你现在进入了循环

重新调整代码以仅在适当的时间运行API调用。类似这样的东西：

useEffect(() => {
axios.all([
axios.get('https://jsonplaceholder.typicode.com/nation'),
axios.get('https://jsonplaceholder.typicode.com/state')
])
.then(responseArr => {
setData(responseArr[0].data);
setData1(responseArr[1].data);
});
}, []); // Ensure any dependencies are added here.

为了更好地衡量，你还应该处理拒绝，这就是最初的错误所提到的。

axios.all().then().catch()-您缺少一个catch语句。

---

对于注释中的问题，在插入字符串时需要使用反勾号。

<Image 
source={{
uri: `https://jsonplaceholder.typicode.com/nation/image/${item.nation_image}`
}}
/>