Question

React Js 未捕获（承诺中）TypeError：无法读取未定义的属性

2018-05-11

12699

javascript reactjs typeerror

我正在学习 React，在发出 ajax 请求时遇到此问题，即使我得到了响应，但无法将该响应传递给其他函数 { this.showBattersData(data); }，我可以在其中呈现 dom。很明显我在这里遗漏了一些东西。任何帮助都将不胜感激。

import React, {Component} from 'react'
import { fetchFactory } from '../Fetch/fetchFactory'
    
    var batters = [];
    var rowdata = "";

    
export class Body extends React.Component {
    constructor(props) {
        super(props);
        this.battersDataFetchReq = this.battersDataFetchReq.bind(this);
        this.showBattersData = this.showBattersData.bind(this);
        this.battersDataFetchReq();
    }    

    //ajax request
    battersDataFetchReq() {
        fetchFactory('./assets/some.json', 'GET')
        .then(function(data) {
            //this.showBattersData = this.showBattersData.bind(this);
            this.showBattersData(data); // this is where i'm getting this error

        })
    }

    showBattersData(res) {
        console.log("inside showBattersData:: ", res);
        rowdata = `
            <table id="batters" name="batters" class="table table-bordered table-hover">
            <caption>List of batters</caption>
            <th>#</th>
            <th>Id</th>
            <th>Type</th>
            <tbody id="batters_body">`;    
        batters = res.batters.batter;
        for(var i = 0; i < batters.length; i++) {
            rowdata += `
                <tr>
                    <td>${[i + 1]}</td>
                    <td>${batters[i].id}</td>
                    <td>${batters[i].type}</td>
                </tr>`;
        }
        rowdata += `</tbody></table>`;
    }


    render() {
        return (
            <div>
                {rowdata}
            </div>
        );
    }
}

Answer 1

您的问题与 JavaScript 中的 Context 概念有关。

在 JS 中， function 有其 Context，这意味着 this 关键字引用函数本身。

您可以使用以下两种解决方案之一：

一：

battersDataFetchReq() {
    let self = this;

    fetchFactory('./assets/some.json', 'GET')
        .then(function (data) {            
            self.showBattersData(data);    
        })
}

Tow（又名 箭头函数 ）： 推荐的解决方案

battersDataFetchReq() {
    fetchFactory('./assets/some.json', 'GET')
        .then((data) => {
            this.showBattersData(data);
        })
}

想知道为什么？来自 MDN：

An arrow function expression has a shorter syntax than a function expression and does not have its own this.

继续阅读...（ 两个链接均来自 MDN ）

Answer 2

您需要 .bind(this) 您的请求回调或使用箭头函数：

//ajax request
battersDataFetchReq() {
    fetchFactory('./assets/some.json', 'GET')
    .then((data) => { // Here, use a lambda or this will not point to your class
        this.showBattersData(data);
    })
}