javascript - 在功能运行时更改屏幕然后更改回来

Question

当按下提交按钮时，我正在尝试更改屏幕。该页面本质上只是一个微调器页面。我希望它在数据提交到数据库时更改为页面，然后在数据库内容完成后更改回来。

我可以让屏幕改变，但不能让它变回来。好吧，我做过一次，但是一旦我开始向函数添加代码，它就完全停止工作了。

我有一个包含表格组件的主页

class Home extends Component {
  constructor() {
    super()
    this.state = {
      data: [],
      loading: false
    };
  }

  handleSpinner() {
    this.setState({ loading: !this.state.loading })
  }

  handleCancel() {
    if (confirm('Are you sure you want to clear the table?')) {
      this.setState({ data: [] })
    } else {
      return
    }
  }

  render() {
    return (
      this.state.loading ? <WaitingSpinner /> :
        <div>
          <MainTable data={this.state.data} handleCancel={this.handleCancel} handleSpinner={this.handleSpinner} />
        </div>
    );
  }

该表有一个调用提交处理程序的提交按钮。

  handleSubmit() {
    this.props.handleSpinner()
    this.writeToDatabase(this.props.data)
    this.props.handleSpinner()
  }

  async writeToDatabase(data) {
    await data.map(test => {
      console.log('DATA ', test)
      axios.post(`database stuff')
        .then(function (response) { console.log(response) }).catch(function (error) { console.log('Err ', error) })
    })
  }

我的目标是更改微调器，运行数据库功能，一旦完成，它就会变回来。

此时它会变为微调器屏幕，但不会变回主表格页面。我猜这与状态实际更新的时间有关，但我对此知之甚少，无法追踪正在发生的事情。

标签： javascriptreactjsstate-management