我是使用React / Axios的新手。
我正在尝试通过Axios将城市词典API中的数据存储到状态中的空数组中。
然后，我试图通过render函数将每个定义的名称呈现给浏览器。
constructor(props) {
super(props);
this.state = {
definitions: [],
errors: null
};
}
componentDidMount() {
this.getUrbDef();
}
getUrbDef() {
axios({
method: 'get',
url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
params: {'term': 'world'}
})
.then(function (response) {
console.log(response);
})
.then(response =>
response.data.list.map(definition => ({
name: `${definition.definition}`,
id: `${definition.defid}`,
}))
)
.then(definitions => {
console.log(definitions);
this.setState({
definitions,
isLoading: false
});
})
.catch(error => this.setState({ error, isLoading: false }));
}
// Renders to the browser
render() {
// Grabbing objects to use from state
let definitions = this.state.definitions;
如前所述，这是我第一次以这种方式使用React.js，因此我有些困惑-任何帮助将不胜感激！
问题在于then处理程序未返回任何内容：
.then(function (response) {
console.log(response);
})
说明：
调用then返回一个Promise，该Promise将根据处理程序函数内部发生的事情而得到解决/拒绝。
在您的情况下，处理程序未返回任何内容（console.log(response)），因此，由返回的promisethen将使用未定义的值进行解析，结果是：
.then(response =>
response.data.list.map(definition => ({
name: `${definition.definition}`,
id: `${definition.defid}`,
}))
)
接收未定义。
您可以采取以下措施来解决此问题：
1）返回response内部then处理程序：
.then(function (response) {
console.log(response);
return response;
})
2）then从链条中删除第一个：
axios({
method: 'get',
url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
headers: {'host': 'mashape-community-urban-dictionary.p.rapidapi.com', 'X-RapidAPI-Key': 'keydata'},
params: {'term': 'world'}
})
.then(response =>
response.data.list.map(definition => ({
name: `${definition.definition}`,
id: `${definition.defid}`,
}))
)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句