contacts.map не является функцией

Question

что это означает, что contacts.map не является функцией, я пытаюсь получить данные из списка массивов контактов, который я создаю, и как показать кнопки на панели, когда я нажимаю каждую кнопку, экран долженпоказать другую информационную базу на данных, которые я получаю из 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;

Answer 1

Чтобы получить значения ваших данных, используйте это

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

Полученная вами ошибка говорит нам, что данные, которые вы получаете, не являются массивом.Поэтому для лучшей отладки запишите все на консоль, чтобы лучше понять, что вы получаете от URL.

Answer 2

Установить значение по умолчанию для уничтожения.

change 'const {contacts} = this.state';to 'const {contacts = []} = this.state;'.

Answer 3

contacts.map не является функцией

подсказывает, что contacts не имеет функции .map, которая, в свою очередь, указывает, что contacts не являетсяArray.Поскольку ваш начальный state.contacts является пустым Array, данные, которые вы извлекаете и назначаете через setState, не могут быть Array, что создает проблему.Возможно, вам не хватает .contacts

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