как бороться с .map не является функцией

Question

Я изучаю React Framework.Когда я пытаюсь получить из моего API с помощью setState .map функция не работает. "data.map не является функцией"

Это единственный метод, который я знаю:

   constructor(props) {
        super(props);
        this.state = {
          name: "secret",
          email: "secret",
          datas: []
        };
      }

    componentDidMount() {
        const { name, password} = this.state;

    fetch(
      `http://localhost:3000/api/user/account?username=${username}&email=${email}`
    )
      .then(res => res.json())
      .then(getdata => {
        this.setState({ datas: getdata });
      })
      .catch(err => console.log(err));
  }

render() {
    const { datas } = this.state;
    const repoItems = datas.map(data => (
      <div key={data.id}>
       <p>{data.name}</p>
       <p>{data.email}</p>
      </div>

    ));

    return (
      <div>
        {datas}
      </div>
    );
  }

Я написал свой код неправильно илиесть ли другой метод помимо этого

Answer 1

С видом сверху все выглядит нормально с вашим кодом. map будет работать только на массивах, и я вижу, что вы также устанавливаете состояние по умолчанию для массива. Однако проблема может заключаться в том, что вы пытаетесь установить состояние после получения ответа от fetch call

  fetch(
      `http://localhost:3000/api/user/account?username=${username}&email=${email}`
    )
      .then(res => res.json())
      .then(getdata => {
        this.setState({ datas: getdata });
      })
      .catch(err => console.log(err));

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

 // may be array is a property of response
 this.setState({ datas: getdata.array });
 // may be getdata is empty
 this.setState({ datas: getdata || [] });