Ошибка ReactJS TypeError: Невозможно прочитать свойство 'map' из неопределенного

Question

Я пытаюсь использовать JSON API, используя fetch ;упомянутая выше ошибка появляется в следующей строке: **this.state.data.map( (dynamicData,key)=>**

Это мой код ReactJS со строкой ошибки, выделенной жирным шрифтом:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

//constructor
constructor() {
  super();
  this.state = {
    data: [],
  }
} //end constructor

componentDidMount(){
  return fetch('https://jsonplaceholder.typicode.com/todos')
  .then((response)=>response.json())
  .then((responseJson)=>
{
  this.setState({
    data:responseJson.todos
  })
  console.log(this.state.data)
})
} // end component did mount

  render() {
    return (
      <div>
      <h2>Todo:</h2>
          <div>
          {
            **this.state.data.map( (dynamicData,key)=>**
            <div>
                <span> {dynamicData.userId} </span>
                <span> {dynamicData.id} </span>
            </div>
            )
          }
          </div>
      </div>
    );
  }
}

export default App;

Могу ли я получить некоторую помощь относительно того, что я 'я делаю неправильно?Заранее спасибо

Answer 1

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  state = {
    data:[],
    url: "https://jsonplaceholder.typicode.com/todos"
  };

  componentDidMount() {
    fetch(this.state.url)
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    const { data } = this.state;
    data && console.log(data);
    return (
      <div>
        {data &&
          data.map(item => <div> Hello User With Id: {item.userId} </div>)}
      </div>
    );
  }
}

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

Ваш didMount также должен выглядеть как мой, setState принимает обратный вызов, поэтому, если вы хотите увидеть, как выглядят данные, это будет выглядеть следующим образом

this.setState({ data }, () => console.log(this.state.data))

В вашем рендере похоже, что вы забыли скобки после функции стрелки на карте.

render() {
    return (
      <div>
      <h2>Todo:</h2>
          <div>
          {
            this.state.data.map((dynamicData,key)=> (
            <div>
                <span> {dynamicData.userId} </span>
                <span> {dynamicData.id} </span>
            </div>
            ))
          }
          </div>
      </div>
    );
  }