反应本机 API 提取错误请求失败，状态代码为 400

Question

我正在尝试在 React Native 时加载数据，但我收到一个错误，指出：

- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/core/settle.js:16:9 in settle
- node_modules/axios/lib/adapters/xhr.js:50:6 in handleLoad
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:566:23 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

这是我的代码：

获取 API 数据：

import { useEffect, useState } from 'react';
import zomato from '../api/zomato';
export default () => {
const [results, setResults] = useState([]);
const [errorMessage, setErrorMessage] = useState('');
const searchAPI = async () => {
try {
const response = await zomato.get(`/collections`);
setResults(response.data);
console.log(response.data);
} catch(err) {
setErrorMessage('Something went wrong, man');
}
}
return [searchAPI, results, errorMessage];
}

这是我正在加载所有内容的屏幕

const HomeScrn = () => {
const [searchAPI, results, errorMessage] = useResults();
useEffect(() => {
searchAPI()
}, [])
return (
<View>
<View style={styles.header}>
<Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignSelf:'center', marginTop:30}}/>
<Icon
raised
name='location'
type='octicon'
color='#f50'
onPress={() => this.setState({ isModalVisible: !this.state.isModalVisible})}
containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
</View>
<FlatList 
style={{marginBottom: 160, marginTop:-10}}
showsVerticalScrollIndicator={false}
keyExtractor={item => item.id}
data={results}
renderItem={({ item }) => 
<TouchableHighlight onPress={()=> console.log('pressed!')}>
<View style={styles.container}>
<ImageBackground style={styles.imageURL} resizeMode="cover" source={{uri: item.collection.image_url}}>
<Text style={styles.collTitle}>{item.collection.title} </Text>
</ImageBackground>
</View>
</TouchableHighlight>}/>
</View>
)}

我不明白那是什么，我是否正确检索了该数据？

Answer 1

我已经找到了解决方案。我错误地调用了 API。事实证明，当我从 API 调用数据时，我需要将一个必需的param添加到我的代码中。这是我更新的代码：

import { useEffect, useState } from 'react';
import zomato from '../api/zomato';
export default () => {
const [results, setResults] = useState([]);
const [errorMessage, setErrorMessage] = useState();
const searchAPI = async (location) => {
try {
const response = await zomato.get(`/collections`, {
params: {
'city_id': `${location}`
}
});
setResults(response);
console.log(response);
} catch(err) {
setErrorMessage(err);
console.log(err)
}
}
return [searchAPI, results, errorMessage];
}