Javascript 如何在发布后单击按钮刷新页面/组件

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

我有一个反应按钮：

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

在处理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（）

，我尝试在

单击（）

后立即调用它，但这似乎太早了，刷新不会更改表中显示的数据。

延迟服务器响应，直到服务器准备好重新加载为止-在您的情况下，看起来您应该在

fs.appendFile

的回调中执行

res.send

，也可以执行

exec

。然后，您的

获取

将无法解析，直到服务器完全就绪，然后您重新加载

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

将

refreshPage（）

调用放在

等待响应之后。text（）

：

---

不过，我同意@ben west的说法——我建议使用来处理这个问题。基本上，您需要使用响应中关心的任何数据

设置state

，然后在组件中需要的任何位置使用

this.state

中的数据。

我最后添加了一个函数

componentdiddupdate（）

，它模仿了我的

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请求的响应发送回来，并立即解决这两个问题。它来自一个后端API，路径为
/list certs
，来自一个名为
certs.json
的本地文件。我尝试在
fs.appendFile
调用
certs列表
之后添加
fs.readFile
调用
certs.json
，如果这是您的意思的话？那么您的组件正在进行另一次
获取
来获取数据？你应该能够让它再次这样做，而不是刷新所有内容。谢谢你的回答，但这似乎是一个过早的重新加载，因为它不会显示新的数据，我必须重新加载，它才会出现。你能用州写一个答案吗？我对React和Nodejs还不熟悉，但我仍在努力想办法解决这个问题。如果你要复制这样的代码，我建议你把它拉到一个函数中，并从
componentdiddupdate
和
componentdiddimount
调用它。
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;
}

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