Question

现在我正在尝试使用axios和React JS从API提取数据。但是，当我使用此代码时，出现此错误：

TypeError: this.state.countries.map is not a function

我有状态数据：[]，并且我试图在状态中设置URL的值。所以我的代码是这样的：

//get user token
const GetTokens = 'Bearer '.concat(localStorage.getItem('token'));
export default class Index extends Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        countries: [],
        response: {}
    }
 }
   componentDidMount() {
    axios.get(apiUrl + '/country-lists', { headers: { Authorization: GetTokens } })
        .then(response => response.data).then(
            (result) => {
                this.setState({
                    countries: result
                });
            },
            (error) => {
                this.setState({ error });
            }
        )
}

在我的渲染中像这样：

{this.state.countries.map(list => (
{list.name}
 ))}

我也这样尝试过。

render() {
    const (countries ) = this.state
    const (countries = []) = this.state

我认为，在获取令牌和引用地图时，我没有犯错。但是我无法弄清楚哪里出了错。

Answer 1

通过查看console.log，我认为您应该使用result.data

 componentDidMount() {
    axios.get(apiUrl + '/country-lists', { headers: { Authorization: GetTokens } })
        .then(response => response.data).then(
            (result) => {
                this.setState({
                    countries: result.data
                });
            },
            (error) => {
                this.setState({ error });
            }
        )

React JS-TypeError：this.state.data.map不是函数

1 个答案: