Javascript contacts.map不是一个函数

这意味着contacts.map不是一个函数，我正在尝试从我创建的contacts数组列表中获取数据，以及如何在面板中显示按钮，当我单击每个按钮时，屏幕应根据我从Api获取的数据显示不同的信息，当我试图获取API时，按钮不再显示在屏幕上，我想在信息顶部显示的化身图像也不再显示在面板上

index.js

const url = 'https://randomuser.me/api/';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      contacts: []
    }
  }

  componentDidMount() {
    this.fetchdata();
  }

  fetchdata() {
    axios.get(url)
      .then(res => {
        console.log(res);
        this.setState({contacts : res.data});
      });
  }

  render(){
    const {contacts} = this.state;
    return (
      <div className="panel">
          {contacts.map(contact => (
          <div class="panel">

            <Panel
              avatar={contact.picture}
            />
              <li class="flex-container">
                <Button title="user">
                  <Panel user={contact.name} />
                </Button>
              </li>
          </div>
            ))}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

ProfilePanel.js

const style={
  borderRadius: 150,
}



class Panel extends Component {

  render() {
    const { avatar,  user } = this.props;
    return (
      <div className="Panel">
        <div class="panels">
          <div className="avatar">
            <img src={avatar} style={style}/>
          </div>
        </div>
        <div class="center">
          <h2 className="user">{user}</h2>
        </div>

      </div>
    );
  }
}

export default Panel;

contacts.map不是一个函数

提示您，contacts没有.map函数，该函数反过来表示contacts不是数组。由于您的初始状态.contacts是一个空数组，因此通过setState获取和分配的数据不能是数组，从而导致问题。可能您缺少一个联系人

---

为了检索数据的值，请使用

this.setState{contacts:res.data.results}

---

您收到的错误告诉我们您接收的数据不是数组。因此，为了更好地进行调试，请将所有内容记录到控制台，以便更好地了解从url返回的内容。

设置默认值

---

更改'const{contacts}=this.state'；到'const{contacts=[]}=this.state；'

您可以添加一个来自服务器的json答案吗？但是，在我更改为.setState{contacts:res.data.results}之后，它显示对象作为React-child-found无效：具有键{title，first，last}的对象。如果要呈现子对象集合，请改用数组。在h2中由div中的面板创建由div中的面板创建由div中的面板创建由div中的应用创建由按钮中的按钮创建由li中的应用创建由div中的应用创建由App中的应用创建此处有什么错误，我如何解决此问题？您的按钮标签应重命名为Button。这可能是导致错误的原因，因为代码中没有导入自定义按钮元素。

this.setState({contacts: res.data.contacts})