如何在 POST 后点击按钮刷新 React page/component

Question

我想要 table 的数据在 按钮点击 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() 之后调用它，但这似乎太早了，刷新不会改变显示在table.

Answer 1

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

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

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

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

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 page/component

How to refresh React page/component on Button click after POST

javascript

refresh

node.js

page-refresh

reactjs