无法读取未定义的属性“地图"，为什么? [英] Cannot read property 'map' of undefined, why?

问题描述

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

import React, { Component } from 'react';从'./UsingFetch'导入UsingFetch；类应用扩展组件{构造函数(道具){超级(道具)；这个.state = {公司名单:[]};}组件DidMount(){fetch('https://jsonplaceholder.typicode.com/users').then(res => { res.json() }).然后(水库=>{这个.setState({公司列表:资源});},(错误)=>{这个.setState({已加载:真，错误});})}使成为() {返回 (<div className="App">1) 数据网格<UsingFetch 数据源 = {this.state.companyList}/></div>);}}导出默认应用程序；

这是我的 UsingFetch.js 文件

class UsingFetch 扩展组件{构造函数(){极好的();这个.state = {已加载:假，}}使成为() {返回 (
{this.props.datasource.map(item =>
{项目名称}</div>)}</div>)}}

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

<块引用>

TypeError: Cannot read property map of undefined"

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

解决方案

因为你没有从第一个 then 块返回任何东西.所以第二个 then 块中的 res 是 undefined.你应该在

中使用 return

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

改成

then(res => res.json())

或

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

This is my App.js file. I am trying to fetch data using fetch() What am I missing? Getting Error as TypeError: Cannot read property map of undefined". What is wrong? How do I get the result?
I'm following the reactjs tutorial, and I keep running into an issue when passing the value from the state of one component into another component. The error 'Cannot read property 'map' of undefined' is thrown when the map function in the CommentList component is executed. What would cause the prop to become undefined when fetching data? I also tried putting debugger, why it is not going inside the fetch call?

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;

This is my UsingFetch.js File

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

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

This is my App.js and UsingFetch.js file. I am trying to fetch data using fetch(), What am I missing? Getting Error as:

TypeError: Cannot read property map of undefined"

What is wrong? How do I get the result?

解决方案

Since you are not returning anything from first then block. So res in second then block is undefined. you should use return in

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

Change to

then(res => res.json())

or

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

这篇关于无法读取未定义的属性“地图"，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！