根据所选值来反应重新渲染表单选项

Question

这是我的表单组件：

class TransactionList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            product_list: [],

        }
    }



    loadProduct(company){
        let url = window.location.href + "?product=True&company=" + company;
        $.ajax(url, {
            success: function (data) {
                console.log(data['data']);
                this.setState({product_list: data['data']});
            }.bind(this),
            error: function (error) {
                console.error(error);
            }
        });
    }


    handleCompanyChange(event) {
        this.setState({company: event.target.value});
        this.loadProduct(event.target.value);
    }

    handleProductChange(event) {
        this.setState({product: event.target.value});
    }


    render() {

        const {company, product,} = this.state;
        return (
            <form method="post" onSubmit={this.handleSubmit.bind(this)}>

                <div className="form-group">
                    <label><strong>Company</strong></label>
                    <select className="form-control selectpicker" data-live-search="true" value={company} onChange={this.handleCompanyChange.bind(this)} required>
                        // options list
                    </select>
                </div>
                <div className="form-group">
                    <label><strong>Product</strong></label>
                    <select value={product} onChange={this.handleProductChange.bind(this)} className="form-control selectpicker" data-live-search="true" required>
                        <option defaultValue={'selected'}>Select Product</option>
                        {this.state.product_list.map(function(name, i){
                            return (<option value={name.name} key={i}>{name.name}</option>);
                        })}
                    </select>
                </div>

                <button type="submit" className="btn btn-primary">Save</button>
            </form>

        )
    }

}


ReactDOM.render(<TransactionList />, document.getElementById("transaction_js_list"));

现在，我想根据公司字段的值获取产品列表。我确定它可以成功设置product_list状态。但是在状态更改后，如何重新呈现“产品”输入中的选项列表？