reactjs - ReactJS错误TypeError：无法读取未定义的属性“地图”

Question

我正在尝试使用fetch使用 JSON API ；上面提到的错误出现在以下行：**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;

关于我做错了什么，我能得到一些帮助吗？提前致谢

标签： reactjsapifetch

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>
    );
  }