即使在使用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) });

而且，上面的答案。 您将需要应用这两个修复程序。