reactjs - 未捕获( promise )ReferenceError : is not defined

Question

我对 ReactJs 非常陌生，目前正在努力创建一个 onClick 事件，该事件将获取自身的 href 值并将其传递给名为“action”的函数。

然后，操作函数应阻止默认的浏览器行为，对传入的 URL 执行 GET 请求，并显示包含响应和状态的警报对话框。

但是，我在尝试从 onClick 事件调用我的函数时遇到了以下错误:

Uncaught (in promise) ReferenceError: action is not defined

var Content = React.createClass({
    getInitialState: function() {
        return {
            teams: []
        }
    },

    componentDidMount: function() {
        const makeRequest = () => axios.get("http://localhost:5000/api/teams").then(({ data }) => this.setState({ teams: data }));

        this.serverRequest = makeRequest();

        this.poll = setInterval(() => {
            this.serverRequest = makeRequest();
        }, 10000)
    },

    componentWillUnmount: function() {
        this.serverRequest.abort();

        clearInterval(this.poll)
    },

    action: function(e) {
        e.preventDefault();

        $.get(e.href, function(res, status) {
            alert("Response: " + res + "\nStatus: " + status);
        });
    },

    render: function() {
        const { teams } = this.state;

        return (
            <div className="list-group">
                { teams.map(function(team) {
                    return ([
                        <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ action }>Click Me</a>
                    ]);
                })}
            </div>
        )
    }
});

ReactDOM.render(<Content />, document.getElementById('content'));

Answer 1

尝试使用 this.action 而不是 action。

更新

我发现了问题。这一切都与范围有关。您无法在map内访问this。

render: function() {
    const { teams } = this.state;

    return (
        <div className="list-group">
            { teams.map((team) => {
                return ([
                    <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ this.action }>Click Me</a>
                ]);
            })}
        </div>
    )
}