Javascript 在函数运行时更改屏幕，然后更改回

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

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

我有一个主主页，有一个表组件

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>
    );
  }

我在这里的目标是更改为微调器，运行数据库函数，一旦完成，它将更改回原来的状态

---

此时，它将更改为微调器屏幕，但不会更改回主表页面。我猜这与状态实际更新的时间有关，但我对它的了解不够，无法追踪到底发生了什么。

this.writeToDatabase

一调用就返回，这意味着您正在调用

this.props.handleSpinner（）

快速连续，这意味着

此.state.loading

在第二次调用此函数时可能是

false

（第一次调用尚未更改状态）。将

handleSubmit

声明为

异步
和
等待
此。writeToDatabase
这太令人困惑了。。。我做了你建议的更改，但现在屏幕根本没有改变。我正在注销状态值，可以看到它正在更改，只是没有屏幕更新。请尝试：
this.setState（prevState=>（{loading:！prevState.loading}））
这也不起作用：（
this.writeToDatabase
在调用后立即返回，这意味着您正在快速连续调用
this.props.handleSpinner（）
，这意味着
this.state.loading
可以在第二次调用此函数时
false
（第一次调用尚未更改状态）。将
handleSubmit
声明为
async
和
wait
这太令人困惑了…我做了您建议的更改，但现在屏幕根本没有更改。我正在注销状态值，可以看到它在更改，只是没有屏幕更新。请尝试：
this.setState（prevState=>({loading:！prevState.loading}））
也不起作用：(
  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) })
    })
  }