我通过API后端而不是前端拉数据我从我的服务器拉它我应该推动状态在一个空数组中，这样我就可以映射，但我一直得到一个
类型错误：this.state.champions.map 不是函数
import React, { Component } from "react";
import axios from "axios";
class Champions extends Component {
constructor(props) {
super(props);
this.state = {
champions: []
};
}
componentWillMount() {
axios.get("/api/Champions").then(response => {
this.setState({ champions: response.data });
// console.log(response);
});
}
render() {
console.log(this.state.champions);
// let champions = this.state.champions;
let champList = this.state.champions.map((elem, ind) => {
return <div key={elem} className="champCard" />;
});
return <div className="App">{champList}</div>;
}
}
export default Champions;
您在您的response.data而不是数组中收到一个对象。
所以你可以把它转换成这样的英雄数组：
componentWillMount() {
axios.get("/api/Champions").then(response => {
this.setState({ champions: Object.values(response.data) });
});
}
更新：
正如评论中所建议的那样 -在这种情况下最好使用componentDidMount而不是componentWillMount。请阅读有关componentDidMount 的更多信息
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句