Question

我无法到达this.state，或者我无法在setState函数内使用componentDidMount。为什么？

import React from 'react';

class LoginApi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            formNames: [],
        };
    }
    componentDidMount() {
        let apiKey = '###';
        window.JF.initialize({ apiKey: apiKey });
        window.JF.login(
            function success() {
                window.JF.getForms(function(response) {
                    for (var i in response) {
                        this.setState({ formNames: [...this.state.formNames, response[i]] });
                    }
                });
            },
            function error() {
                window.alert('Could not authorize user');
            }
        );
    }

    render() {
        return (
            <div className="initializeForm">
                <ul>
                    {this.state.formNames.map(forms => (
                        <li key={forms}>{forms}</li>
                    ))}
                </ul>
            </div>
        );
    }
}

export default LoginApi;

尝试使用此代码时，我得到TypeError: this is undefined.

this.setState({formNames: [...this.state.formNames,response[i]]});

Answer 1

因为您在另一个函数中引用了this。当您在JF.login中创建回调函数，并再次使用 function 关键字在JF.getForms中创建回调函数时，它将创建一个new this context，因此setState是未定义的

解决此问题的常用方法是使用arrow function (=>)，它最终将使用this的封闭词法作用域（在您的情况下是类）。

window.JF.login(
    () => {
        window.JF.getForms((response) => {
            for (var i in response) {
                this.setState({ formNames: [...this.state.formNames, response[i]] });
            }
        });
    },
    () => {
        window.alert('Could not authorize user');
    }
);

Answer 2

因为您编写的成功函数没有绑定/而不是箭头函数。没有它，它指的是调用函数。在这种情况下，要成功功能。将其更改为箭头功能，它将起作用。（）=> {...}

TypeError：这是未定义的吗？

2 个答案: