即使在使用 this.bind() 后也无法从 React 函数访问 this.state

Question

关于这个主题有很多问题，它们似乎都指向我已经知道的答案，使用 this.bind 在构造函数中绑定函数。

从 handleChange() 我可以更新 this.state.feedback，因为我可以看到我在表单中输入的每个字母都更新了，但之后我尝试 console.log(this.state.feedback) 并且它是未定义的。我也无法从 handleSubmit() 或 sendFeedback() 访问 this.state，因为它在那里也未定义。

有人知道我做错了什么吗？我只想从 handleSubmit() 访问 this.state.feedback。除此以外，一切正常。正在发送电子邮件，但由于反馈未定义，它是空的。

import React, { Component } from 'react';

class EmailForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            formSubmitted: false,
            feedback: ""
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.sendFeedback = this.sendFeedback.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    handleSubmit (event) {
        event.preventDefault();

        const {
            REACT_APP_EMAILJS_RECEIVER: receiverEmail,
            REACT_APP_EMAILJS_TEMPLATEID: template
        } = process.env;

        //let feedback  = this.state.feedback;
        //console.log(`feedback: ${this.state.feedback}`);
        this.sendFeedback(
            template,
            this.props.senderEmail,
            receiverEmail,
            this.state.feedback);


        this.setState({
            formSubmitted: true
        })
    }

    handleClose() {
        console.log("Closing");  // TODO fix this
    }

    handleChange(event) {
        event.preventDefault();
        this.setState({
            feedback: event.target.value.feedback
        });
        console.log(this.state.feedback);
    }

    sendFeedback (templateId, senderEmail, receiverEmail, feedback) {
        console.log(`feedback: ${feedback}`);
        console.log(`this.state.feedback ${this.state.feedback}`);
        window.emailjs.send(
            'default_service',
            templateId,
            {
                senderEmail,
                receiverEmail,
                feedback
            })
            .then(res => {
                this.setState({ formEmailSent: true });
                console.log("Email sent!");
            })
            // Handle errors here however you like, or use a React error boundary
            .catch(err => console.error('Failed to send feedback. Error: ', err))
    }

    render() {
        //let feedback = "";
        return(
            <form className="feedback-form" onSubmit={this.handleSubmit}>
                <h1>Your Feedback</h1>
                <textarea
                    className="text-input"
                    id="feedback-entry"
                    name="feedback-entry"
                    onChange={this.handleChange}
                    placeholder="Enter your feedback here"
                    required
                    value={this.state.feedback}
                />
                <div className="btn-group">
                    <button className="btn btn--cancel" onClick={this.handleClose}>
                        Cancel
                    </button>
                    <input type="submit" value="Submit" className="btn btn--submit" />
                </div>
            </form>
        )
    }
}

export default EmailForm;

Answer 1

问题出在您的handleChange 函数上

要获得你刚刚做的事件的价值：

event.target.value

您改为尝试访问event.target.value.feedback，它始终是undefined

Answer 2

这是一个非常常见的 React 问题。

setState 是异步的。异步函数将作为其他指令并行执行（嗯，有点）。您的console.log 将在函数完成之前被调用。

如果你想看到它的结果，你必须使用回调函数，当它完成时将被调用作为它的第二个参数：

this.setState({
    feedback: event.target.value.feedback
}, () => { console.log(this.state.feedback) });

还有，上面的答案。
您需要同时应用这两个修复程序。