我正在尝试在用户更新Child组件的select元素的值 * 之后 * 更新Parent组件的状态。
虽然我已经让它工作了一些，但我注意到当我在select上触发onChange事件时，它总是返回 previous 值，而不是刚刚选择的值。

class Parent extends Component{
    constructor(props){
        super(props);
        this.state = { data: {
            condition: "any"
        }};
    }

    update = data => {
        this.setState({ data: { 
            ...this.state.data, 
            ...data 
        }});
        
        // This gets called every time I change the value of my select element.
        console.log(this.state.data);
    }

    render(){
        return (
            <Child
                condition={this.state.data.condition} 
                onUpdate={data => this.update(data)} />
        );
    }
}

class Child extends Component{
    updateParent = data => {
        this.props.onUpdate(data);
    }

    render(){
        const options = [
            ["any", "Any Condition"], 
            ["new", "Brand New"], 
            ["used", "Used"]
        ];

        return (
            <select 
                defaultValue={ props.selected } 
                onChange={({ target }) => this.updateParent({ condition: target.value })}>
                    { options.map(([id, name]) => (
                        <option key={id} value={id}>{ name }</option>
                    )}
            </select>
        );
    }
}

在本例中，如果我选择used，控制台将返回any。然后，如果我选择new，控制台将返回used。