Question

我正在向后端提交一个表单，然后重新渲染组件以获取新项目的列表。现在，我正在componentDidUpdate函数中进行重新渲染：

componentDidUpdate() {
  this.props.fetchListStart();
}

我的提交表单如下：

<form
  onSubmit={e => {
    e.preventDefault();
    this.props.submit();
    this.props.close();
  }}
>
  <div className="row" style={{ textAlign: 'start' }}>
    Do you really want?
    <div className="col-md-12 buttonContainer">
      <ButtonA
        label="Submit"
        style={{ width: '50%' }}
        primary
        type="submit"
      />
    </div>
  </div>
</form>

所以问题是，有时componentDidUpdate的启动速度比我提交的数据库更新数据快。我应该如何检查提交是否完成？

Answer 1

将fetchListStart（）移至更新函数的回调。

例如： --TABLE create table DBATCK.SHOW_USR ( "IDCODEAMB" NUMBER, "DESCRAMB" VARCHAR2(50 BYTE), "IDCODEAPP" VARCHAR2(7 BYTE), "DESCRAPP" VARCHAR2(50 BYTE) ); --VIEW create view DBATCK.VW_SHOW_USR as select * from DBATCK.SHOW_USR;

Answer 2

从您的问题来看，您似乎需要在发布到db的方法的成功回调中调用父组件的setState函数。然后调用fetchListStart作为setState的回调。

例如

class ParentComponent extends React.Component{
    submit(){
      fetch("/data").then(response=>{
        this.setState({
          data:response
        },this.fetchListStart())
      })
    }

    render(){
      return <ChildComponent {...this.state}  submit={this.submit} />
    }

}

我假设您仅需要在呈现视图之后才获取数据列表。 setState（）的第二个参数是一个可选的回调函数，将在setState完成并重新呈现组件后执行。

如何检查是否将完成的POST方法提交到数据库，然后在React-Redux中重新渲染

2 个答案: