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

我的目标是切换到微调器，运行数据库功能，一旦完成，它就会变回原来的状态。

这时，它切换到微调器屏幕，但从不更改回到主表页面。我猜测这与状态实际更新有关，但是我对它的了解不足以跟踪发生的情况。

在功能运行时更改屏幕，然后返回

0 个答案: