Question

ReactJS 错误 TypeError：无法读取未定义的属性“map”

2018-04-26

458

javascript reactjs fetch-api

我正尝试使用 fetch-api 使用 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;

我能得到一些帮助，看看我做错了什么吗？

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

在您的渲染中，您似乎忘记了 map 中箭头函数后的括号。

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