如何在 POST 后单击按钮上刷新 React 页面/组件

Question

我希望在提交 POST 请求后在按钮单击时刷新数据表。

我有一个反应按钮：

<Button onClick={this.click} className="domain-button" type='primary'>Add</Button>

以及对应的click函数，以及refreshPage函数：

async click() {
  const { domainInputValue } = this.state;
  console.log( domainInputValue );

  const response = await
  fetch('/new-cert', {
      headers: {
          'Content-Type': 'application/json'
      },

      method: 'POST',
      body: JSON.stringify({domainInput: domainInputValue})
  });

  const body = await response.text()
  console.log(body)

  if (response.status !== 200) throw Error(body.message);
  return body;
}

refreshPage() {
  window.location.reload();
}

在我的后端 Nodejs 中处理我的 POST 请求：

app.post('/new-cert', function (req, res) {
    fs.appendFile('certs-list', '\n' + req.body.domainInput, function (err) {
        if (err) throw err;
    });
    res.send('POST request: ');

    console.log("INSERTING")
    exec('sh cert-check-script-insert.sh');

    console.log(req.body);
    console.log('post is working!')
});

我不确定在哪里调用refreshPage()，我尝试在click() 之后立即调用它，但这似乎为时过早，并且刷新不会更改表格中显示的数据。

Answer 1

延迟服务器响应，直到服务器准备好重新加载 - 在您的情况下，看起来您应该在 fs.appendFile 的回调中执行 res.send 和 exec。那么你的fetch 在服务器完全准备好之前不会解析，然后你重新加载。

刷新整个页面以获取新数据并不是很 React，但这不关我的事。

Answer 2

将refreshPage() 调用放在await response.text() 之后：

async click() {
  const { domainInputValue } = this.state;
  console.log( domainInputValue );

  const response = await
  fetch('/new-cert', {
      headers: {
          'Content-Type': 'application/json'
      },

      method: 'POST',
      body: JSON.stringify({domainInput: domainInputValue})
  });

  const body = await response.text()

  refreshPage();

  console.log(body)

  if (response.status !== 200) throw Error(body.message);
  return body;
}

不过，我同意@ben-west 的观点——我建议使用state in React 来处理这个问题。从本质上讲，您将希望 setState 使用响应中您关心的任何数据，然后在组件中任何您需要的地方使用来自 this.state 的数据。

Answer 3

我最终添加了一个函数 componentDidUpdate()，它模仿了我的 componentDidMount() 行为：

componentDidMount() {
    this.callApi()
        .then(res => {
            this.setState({
                json: res.map(x => x),
            })
        })
        .catch(err => console.log(err));
}


componentDidUpdate() {
    this.callApi()
        .then(res => {
            this.setState({
                json: res.map(x => x),
            })
        })
        .catch(err => console.log(err));
}