React Js Uncaught (in promise) TypeError: Cannot read property of undefined

Question

我正在学习做出反应，在发出 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 中，functions 有它们的上下文，这意味着 this 关键字指的是函数本身。

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

一个：

battersDataFetchReq() {
    let self = this;

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

Tow（又名Arrow function）：推荐的解决方案

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

想知道为什么？来自 MDN：

箭头函数表达式的语法比函数表达式短，并且没有自己的 this。

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

• Arrow functions

• this

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