javascript - 由于 promise 而在状态更改之前发生更新？

Question

我有这个更新函数，每当单击“更新”按钮时，它就会更新组件的状态和 View ；但是，它仅在单击“更新”按钮后才开始更新。就像，我必须单击更新，然后更改表单输入才能看到 View 的更改。

Expectation: 

 Step 1: Change Form input then click 'Update' button
 Step 2: State and View changes

Reality/Issue:

 Step 1: In order to see the change, I have to click the 'Update' button first
 Step 2: Then I can change Form input and see the change in my view.

如何使组件的状态和 View 仅在单击“更新”按钮后才更改？

我发现 Promise 是异步的，因此我尝试添加回调、使用 async wait 或移动代码顺序，但仍然产生相同的问题。

export class EducationPage extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        incomingClass: {...this.props.location.state.data},
        alert: {
            display: false
        }};
    this.updateEdu = this.updateEdu.bind(this);
    this.handleChange = this.handleChange.bind(this);
}   

handleChange = (event) => {
    const target = event.target;
    const value =  target.value;
    const name = target.name;
    this.setState((prevState) => {
        let newState = {};
        let data = Object.assign({}, prevState.data);
        data[name] = value;
        newState.data = data;
        return newState;
    });
};

updateEdu = (e) => {
    e.preventDefault();
    let newEdu = {...this.state.incomingClass};
    BackEndRestPromiseService.updateEdu(newEdu).then(data => { // Promise
        this.setState({
            incomingClass: data
        }, () => console.log(data));
    }).catch(e => {
    console.log(e);
        this.setState({
            error: "Error!"
        });
    });
}

render() {
return (
    <div>
        <Form onSubmit={e => this.updateEdu(e)}>
        <Button type="submit">Update</Button>
            <Form.Row>
                <Form.Group as={Col}>
                    <Form.Label>School</Form.Label>
                    <Form.Control id="school" name="school" placeholder="School" value={this.state.incomingClass.school || ""} onChange={this.handleChange}/>
                </Form.Group>

                <Form.Group as={Col}>
                    <Form.Label>Grade</Form.Label>
                    <Form.Control id="grade" name="grade" placeholder="Grade #" value={this.state.incomingClass.grade || ""} onChange={this.handleChange}/>
                </Form.Group>
            </Form.Row>
        </Form>
    </div>
)
}

Answer 1

我将简化您的一些代码，使其更易于调试。

handleChange = (event) => {
    const { name, value } = event.target;
    this.setState(prevState => 
      ({ incomingClass: { ...prevState.incomingClass, [name]: value } }));
};

我在这里注意到，在初始状态下没有 data 属性，只有 incomingClass。但是你的handleChange方法在prevState.data上运行。 setState还支持部分更新状态。因此您不必获取之前的完整状态并进行设置。

此外，在将 incomingClass 发送到服务器之前无需重建它。

updateEdu = (e) => {
    e.preventDefault();
    BackEndRestPromiseService.updateEdu(this.state.incomingClass)
     .then(data => this.setState({ incomingClass: data }))
     .then(() => console.log(data))
     .catch(e => { console.log(e); this.setState({ error: "Error!" }) });
}

由于您已经使用了类属性，因此无需在此处使用 lambda 或绑定(bind)它。

<Form onSubmit={this.updateEdu}>

这是不必要的，因为您正在使用类属性

this.updateEdu = this.updateEdu.bind(this);
this.handleChange = this.handleChange.bind(this);