反应图不是一个功能

Question

哟伙计们,得到错误'contacts.map不是一个功能'不知道为什么会这样？刚开始反应可能会遗漏一些明显的东西.当我控制台登录时,我正在获取数据.代码如下:

import React, { Component } from 'react'
import axios from 'axios';


class Contacts extends Component {
 constructor(){
 super();

 this.state = {
    contacts: [],
 }

}


componentDidMount(){
    axios.get('url')
    .then(response => {
    this.setState({ contacts: response.data });
    })
    .catch(function (error) {
    console.log(error);
    })
}


render() {
    const { contacts } = this.state 
    return(
    <div>
        {contacts.map(contact => (
            <h1>contact.hello</h1>
        ))}

    </div>
    )
}
}

export default Contacts;

显然它的对象不是数组......

那我怎么渲染这个对象呢？

它现在有一个属性,但稍后会有更多:尝试JSON.stringify(obj)

{hello: "test"}

Answer 1

问题是你设置contacts为response.data,显然它不是一个数组.

componentDidMount安装组件后触发并尝试获取字符串'url'.更新状态时,将重新绘制组件并显示错误.