状态中的React值永远不会更新

Question

我的反应应用中的to值永远不会更新。

我有以下代码：

handleToChange(event) {
    this.setState({
        query: this.state.query,
        from: this.state.from,
        to: event.target.value,
        data: this.state.data,
        loading: this.state.loading,
    });
    console.log(event.target.value)
    this.triggerChange();
}

console.log(event.target.value)正确返回值，但状态未更新。我知道这一点，因为应用程序永远不会更新to值。状态的其他值正确更新，我使用相同的方法来更新它们。

这是全班。 （Handler类是向服务器发出转换请求的接口）

import React, {Component} from 'react';
import Handler from '../Handler.js';

class Translator extends Component {

    constructor() {
        super();

        this.state = {
            query: '', from: 'en', to: 'es', data: {}, loading: false
        };

        this.handleQueryChange = this.handleQueryChange.bind(this);
        this.handleFromChange = this.handleFromChange.bind(this);
        this.handleToChange = this.handleToChange.bind(this);

        this.triggerChange = this.triggerChange.bind(this);
        this.update = this.update.bind(this);
    }

    async update() {

        this.setState({
            query: this.state.query, from: this.state.from, to: this.state.to, data: this.state.data, loading: true,
        });

        let api = await Handler.get();

        this.setState({
            query: this.state.query, from: this.state.from, to: this.state.to, data: api, loading: false
        });
    }

    triggerChange() {
        Handler.put(this.state.query, this.state.from, this.state.to);
        this.update();
    }

    handleQueryChange(event) {
        this.setState({
            query: event.target.value,
            from: this.state.from,
            to: this.state.to,
            data: this.state.data,
            loading: this.state.loading,
        });
    }

    handleFromChange(event) {
        this.setState({
            query: this.state.query,
            from: event.target.value,
            to: this.state.to,
            data: this.state.data,
            loading: this.state.loading,
        });
        this.triggerChange();
    }

    handleToChange(event) {
        this.setState({
            query: this.state.query,
            from: this.state.from,
            to: event.target.value,
            data: this.state.data,
            loading: this.state.loading,
        });
        this.triggerChange();
    }


    render() {

        const error_message = (
            <div>
                <button data-toggle="collapse" data-target="#error" className="btn btn-outline-danger">Error</button>

                <div className="collapse" id="error">
                    Oops your query was invalid, this may be because of
                    <ul>
                        <li><b>The query is nonsense/ word does not exist in the language</b></li>
                        <li>There was a connection error to the api server</li>
                        <li>Exceeded quota
                            <ul>
                                <li>To prevent abuse, WordReference only allows a certain number of requests per IP</li>
                                <li>Please wait until the quota is reset</li>
                            </ul>
                        </li>
                        <li>Bugs: something may be wrong with the code.. my
                            bad &#175;&#92;&#95;&#40;&#12484;&#41;&#95;&#47;&#175;</li>
                    </ul>
                    You can always click the link to see the translations on WordReference
                </div>
            </div>
        );


        const loading_bar = (
            <div>
                <div className="progress" style={{height: 10}}>
                    <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style={{width: '100%'}}/>
                </div>
            </div>
        );

        let error = "";
        if (this.state.data['phrase'] === '{invalid}') {
            error = error_message;
        }

        let loading = "";
        if (this.state.loading) {
            loading = loading_bar;
        }


        return (
            <div>

                <div className="row">
                    <div className="col-sm">

                        <div className="input-box">
                            <div className="custom-control custom-control-inline">
                                From:
                                <select className="custom-select custom-select-sm" onChange={this.handleFromChange.bind(this)}
                                        defaultValue="en" disabled>
                                    <option value="en" selected>english</option>
                                    <option value="es">spanish</option>
                                    <option value="fr">french</option>
                                </select>

                                To:
                                <select className="custom-select custom-select-sm" onChange={this.handleToChange.bind(this)}
                                        defaultValue="es" disabled>
                                    <option value="en">english</option>
                                    <option value="es" selected>spanish</option>
                                    <option value="fr">french</option>
                                </select>

                            </div>
                            <br/><br/>

                            <div className="form-group">
                                <textarea className="form-control" id="" placeholder="Enter Text" rows="4"
                                          onChange={this.handleQueryChange}/>
                            </div>

                            <button onClick={this.triggerChange} className="btn btn-success">Go</button>

                        </div>

                    </div>

                    <div className="col-sm">
                        <div className="output-box">

                            <br/><br/>
                            <div className="card">
                                <div className="card-block">

                                    <div className="card-text">
                                        {this.state.data.phrase}
                                    </div>
                                    <br/><br/>

                                    <div className="card-footer">
                                        <a href={this.state.data.url} className="card-link">WordReference ></a>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>

                </div>
                <br/>

                <div>
                    {loading}
                </div>

                <div className="error-box text-danger">
                    {error}
                </div>

            </div>
        );
    }

}

export default Translator;