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

延迟服务器响应，直到服务器准备好重新加载 - 在您的情况下，看起来您应该在res.send的回调中执行exec，也可能fs.appendFile。然后你的fetch将无法解决，直到服务器完全准备就绪，然后你重新加载。

刷新整个页面以获取新数据并不是很干净，但这不属于我的业务。

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

POST后如何刷新按钮上的React页面/组件

3 个答案: