无法读取未定义的属性“地图”，为什么？答案

【问题标题】：Cannot read property 'map' of undefined, why?无法读取未定义的属性“地图”，为什么？
【发布时间】：2019-09-01 15:30:06
【问题描述】：

这是我的 App.js 文件。我正在尝试使用 fetch() 获取数据我错过了什么？获取错误作为 TypeError：无法读取属性未定义的地图”。出了什么问题？我如何得到结果？
我正在关注 reactjs 教程，但我一直遇到问题将值从一个组件的状态传递到另一个组件时零件。抛出错误'无法读取未定义的属性'map'' 当执行 CommentList 组件中的 map 函数时。什么获取数据时会导致道具变得未定义吗？我也尝试放置调试器，为什么它没有进入 fetch 调用？

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

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      companyList:[]
    };
  }

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => { res.json() })
      .then(
        res => {
          this.setState({
            companyList : res
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    return (
      <div className="App">
        1) DataGrid
        <UsingFetch datasource = {this.state.companyList}/>
      </div>
    );
  }
}

export default App;

这是我的 UsingFetch.js 文件

class UsingFetch extends Component{
  constructor(){
    super();
    this.state = {
      isLoaded:false,
    }
  }

  render() {
    return (
      <div>
        {this.props.datasource.map(item =>
          <div>
            {item.name}
          </div>
        )}
      </div>
    )
  }
}

这是我的 App.js 和 UsingFetch.js 文件。我正在尝试获取数据使用 fetch()，我错过了什么？得到错误为：

TypeError: Cannot read property map of undefined"

怎么了？我如何得到结果？

【问题讨论】：

标签： reactjs fetch

【解决方案1】：

因为您没有从第一个 then 块返回任何内容。所以第二个then 块中的res 是undefined。你应该在

中使用return

then(res => { res.json() })

改成

then(res => res.json())

或

then(res => { return res.json() })

【讨论】：

谢谢。你能帮我阅读本地 json。 App.js 和 data.js 在同一个文件夹中。 fetch('../data.js') .then(res => {console.log(res); return res.json()}); data.js 是： const customers = [ {'ID': 1, 'City': 'Bentonville' }]; SyntaxError: 意外的标记
你可以将[{'ID': 1, 'City': 'Bentonville' }]; 保留在“data.js”中。和“App.js”中的import data from './data.js'。并且“data.js”也应该在src 文件夹中。或者你可以使用json-server
使用导入它工作正常。但我需要使用 fetch 来阅读它。使用 fetch 读取本地文件是必需的。 data.json 在源文件中，App.js 也谢谢！
我认为您可能正在使用create-react-app。所以使用fetch 可能是不可能的。您可以在浏览器中转到Network 选项卡并单击data.js 以查看响应。您可能会收到 html 作为响应。
如果您真的想使用fetch，那么您需要eject 应用程序并更改webpack-dev-server 配置。因为它为每个请求提供 html 文件。或者你可以简单地使用json-server。

【解决方案2】：

您没有在组件中的任何地方使用您的 isLoaded 吗？你也没有传递任何东西。您应该向下传递您的状态，然后在 setState 中分配它。

在您的应用中：

<UsingFetch datasource = {this.state.companyList} isLoaded={this.state.isLoaded}/>

在你的 UsingFetch 中

constructor(){
  super();

   this.state = {
      isLoaded:this.props.isLoaded,
 }
   }

或者只是检查数据源是否存在或是否已加载。

<div>
{this.props.datasource && this.props.isLoaded?
<React.Fragment>
                     {this.props.datasource.map(item =>
                     <div>
                         {item.name}
                     </div>
                     )}
 </React.Fragment>
:
<React.Fragment></React.Fragment>

【讨论】：