Javascript react map不是一个函数

伙计们，获取错误“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;

---

问题是您将

联系人设置为
response.data
，这显然不是一个数组

componentDidMount
在装入组件后激发，并尝试获取字符串“url”。当状态更新时，组件将被重新绘制并给出错误信息。
在安装组件之前，使用async Wait获取响应

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


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

   this.state = {
      contacts: [],
   }
  }

  async componentWillMount(){
    const response = await axios.get('url')
    this.setState({ contacts: response.data })
  }

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

      </div>
      )
   }
}

export default Contacts;

import React，{Component}来自“React”
从“axios”导入axios；
类联系人扩展组件{
构造函数（）{
超级（）；
此.state={
联系人：[]，
}
}
异步组件willmount（）{
const response=wait axios.get（'url'）
this.setState（{contacts:response.data}）
}
render（）{
const{contacts}=this.state
返回(
{contacts.map（contact=>(
联系人，你好
))}
)
}
}
导出默认联系人；
由于联系人是一个对象，我建议您在其上执行object.keys，然后执行.map，这样您就可以获得对象键及其值

还有一件事，当您迭代数据数组或如下所示的对象时，请不要忘记向父jsx元素添加唯一键

 <div>
    {Object.keys(contacts).map((name, index) => (
        <h1 key={'Key'+index}>{contacts[name]}</h1>
    ))}

</div>


{Object.keys（contacts）.map（（名称、索引）=>(
{联系人[姓名]}
))}
来自react文档：

注:

这些方法被视为遗留方法，您应该在新代码中：


不安全的_组件willmount（）

当您想要包装一个对象时，您可以简单地将其包装在括号中

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

    this.state = {
      contacts: [],
    }
  }

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

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

类联系人扩展组件{
构造函数（）{
超级（）；
此.state={
联系人：[]，
}
}
componentDidMount（）{
get（'url'）
。然后（{data}）=>{
this.setState（{contacts:[data]}）；
})
.catch（（错误）=>{
console.log（错误）；
});
}
render（）{
const{contacts}=this.state；
返回(
{contacts.map（contact=>(
联系人，你好
))}
);
}
}
该死的，你把对象拿回来了，在这种情况下我该怎么办？@user9013856这取决于对象的结构。你能把你得到的东西加到问题上吗？
class Contacts extends Component {
  constructor() {
    super();

    this.state = {
      contacts: [],
    }
  }

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

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