Реагировать на проблемы, когда я пытаюсь выполнить вызов api с помощью fetch - PullRequest
Новая
       16

Реагировать на проблемы, когда я пытаюсь выполнить вызов api с помощью fetch

0 голосов
/ 16 июня 2020

У меня проблема, я пытаюсь выполнить вызов api для https://randomuser.me/api/ с помощью fetch, и я пытаюсь установить свой массив значений в данные api, а затем сопоставить, и я не могу понять, где находится проблема в моем коде, потому что я получаю некоторые ошибки 

import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: [],
    };
  }

  componentDidMount() {
    fetch("https://randomuser.me/api/")
      .then((res) => res.json())
      .then((data) => this.setState({ value: data }));
  }

  render() {
    return (
      <div>
        <p>test</p>
        <div className="map">
          {this.state.value.map((item) => (
            <p>{item.gender}</p>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 16 июня 2020

Конечная точка, из которой вы выполняете выборку, отправляет ответ как объект, при попытке setState с вызовом this.setState({ value: data }) он устанавливает весь объект ответа как this.state.value. Вот почему вы получаете сообщение об ошибке "this.state.value.map is not a function", потому что this.state.value был заменен на object вызовом setState.

Я считаю, что вам нужно значение свойства results из объекта ответа, который имеет правильный массив данных для пользователя. Вы можете просто изменить вызов setState, чтобы установить значение как data.results. 

componentDidMount() {
    fetch("https://randomuser.me/api/")
      .then((res) => res.json())
      .then((data) => this.setState({ value: data.results }));
  }
...