Question

我有一种情况，我在回调时将参数从子类传递给父类。即使在 Parent 调用执行必须发生状态更新的部分之前，状态已经在执行该部分之前更新。例如，在下面的代码中，第一个 console.log 语句已经将状态变量 x 的更新值设置为 Parent 类中的新值。这非常令人惊讶。

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ...this.props,
        };
        this.handleCallback = this.handleCallback.bind(this);
    }
    
    handleCallback = (x) => {
        console.log('1 CALLBACK in Parent', this.state);
        this.setState({x});
        console.log('2 CALLBACK in Parent', this.state);
    }
    
    render() {
        return (
            <Child onSubmit={this.handleCallback}>
        )
    }
}

export default class Child extends Component {
    constructor() {
        super();
        this.state = {
            x: {
                y: 1,
                z: 2
            }
        }; 
    }

    handleInputChange = event => {
        const {name, value} = event.target;
        this.setState((prevState) => ({
            x: {
                ...prevState.x, 
                [name]: value
            }
        }));
    };
    
    handleSubmit = event => {
        this.props.onSubmit(this.state.x);
    }
    
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
            .
            // update to {this.state.x} happens here in input form
            <input className='inputText' type='text' name='y' placeholder={this.state.x.y} onChange={this.handleInputChange} />
            <input className='inputText' type='text' name='z' placeholder={this.state.x.z} onChange={this.handleInputChange} />
            .
        )
    }
}

我想知道这里可能出了什么问题，这里的最佳做法是什么？

在调用更新它的函数之前更新反应状态

0 个答案: