javascript - react map 不是一个功能

Question

伙计们，收到错误“contacts.map is not a function”不知道为什么？刚开始使用react可能会遗漏一些明显的东西。当我控制台日志一切正常时，我正在获取数据。代码如下:

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”后触发。当状态更新时，组件被重绘并给出错误。