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

Question

I want a table of data to refresh on button click after the POST request has been submitted.

I have a react button:

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

And the corresponding click function, and refreshPage function:

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

And in my back-end Nodejs to handle the POST request I have:

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

I'm not sure where to call refreshPage(), I've tried calling it right after click() but this seems to be too early and the refresh does not change the data displayed in the table.

You could have a posted variable in state, which changes after the POST. This will cause the component to re-render, which seems to be what you want. — Colin Burke
– Colin Burke, Commented Apr 17, 2018 at 15:57
@Colin thanks for the suggestion, could you possibly write an answer please, just not sure where to put things — tnoel999888
– tnoel999888, Commented Apr 17, 2018 at 16:06

Ben West · Accepted Answer · 2018-04-17 15:59:18Z

0

Delay the server response until the server is ready for the reload - in your case, looks like you should do res.send and maybe also exec inside the callback to fs.appendFile. Then your fetch will not resolve until the server is definitely ready, and you do your reload then.

Refreshing the whole page to get new data is not very React, but that's none of my business.

answered Apr 17, 2018 at 15:59

Ben West

4,5861 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tnoel999888 Over a year ago

Should I just be re-rendering the component? And if so could you suggest how to, sorry I'm new to this

Ben West Over a year ago

Yeah, something like that. Where does the new data come from when you reload?

Ben West Over a year ago

Maybe you could send the new data back as the response from the POST request and solve both problems at once.

tnoel999888 Over a year ago

It's coming from a back-end API with path /list-certs that comes from a local file called certs.json. I've tried to add a fs.readFile call to certs.json after the fs.appendFile call to certs-list if that's what you mean?

Ben West Over a year ago

So your component is doing another fetch to get the data? You should be able to make it do that again instead of refreshing everything.

camden · Accepted Answer · 2018-04-17 16:05:10Z

0

Put the refreshPage() call after 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;
}

I agree with @ben-west, though -- I'd recommend using state in React to handle this. Essentially, you'll want to setState with whatever data you care about from the response, and then use that data from this.state wherever you need it in your component.

answered Apr 17, 2018 at 16:05

camden

2,03620 silver badges19 bronze badges

1 Comment

tnoel999888 Over a year ago

Thanks for the answer but it seems to be a premature reload as it doesn't display the new data and I have to reload again for it to appear. Could you possibly write an answer using States please? I'm new to React and Nodejs and still trying to get my head around it

tnoel999888 · Accepted Answer · 2018-04-19 08:44:21Z

0

I ended up adding a function componentDidUpdate() which mimics my componentDidMount() behaviour:

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

answered Apr 19, 2018 at 8:44

tnoel999888

6543 gold badges14 silver badges29 bronze badges

1 Comment

camden Over a year ago

If you're duplicating code like this, I'd recommend pulling this out into a function and calling it from componentDidUpdate and componentDidMount.

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related