How to make ajax call auto refresh in react js

Question

I need to make this page auto refresh, make the ajax call to the backend 3 mins like, how to setup this? What I am thinking is set a interval in ajax, make it automatically call every 3 mins? Is there any way to implement this? Or there is any better solution to implement this?

export default class InventoryLevelReport extends React.Component {
  constructor() {
    super();

    this.state = {
      data: [
        {
          sku: null,
          inventoryCount: 0
        }
      ],
      url: '/mft/api/reports/inventory-view'
    };
  }

  sortByCount() {
    this.setState({data: _.orderBy(this.state.data, (i) => i.inventoryCount)});
  }

  componentDidMount() {
    ajax(this.state.url, {
      success: data => {
        console.log(data);
        this.setState({data: data.data});
      }
    });
  }

  render() {
    const buttonStyle = {
      position: 'relative',
      float: 'right'
    };
    return <div className="content">
      <Button style={buttonStyle} onClick={() => this.sortByCount()}>Sort</Button>
      <div>
        <Table tableType='bordered'>
          <th>SKU</th>
          <th>Count</th>
          <tbody>
            {this.state.data.map((data, i) => <InventoryTableRow data={data} key={i} />)}
          </tbody>
        </Table>
      </div>
    </div>;
  }
}

class InventoryTableRow extends React.Component {

  render() {
    return (
      <TableRow>
        <TableColumn>{JSON.stringify(this.props.data.sku).split('"').join('')}</TableColumn>
        <TableColumn>{JSON.stringify(this.props.data.inventoryCount)}</TableColumn>
      </TableRow>
    );
  }
}

To handle complicated interactions, you may want to look into redux, react-redux and redux-thunk. — Jo Peyper
– Jo Peyper, Commented Feb 20, 2017 at 21:46

Elham.NE · Accepted Answer · 2020-01-04 14:49:05Z

2

You should be able to wrap your ajax call with setInterval

constructor() {
  super();

  // ... existing constructor code

  this.loadData = this.loadData.bind(this)
}

loadData() {
  ajax(this.state.url, {
    success: data => {
      console.log(data);
      this.setState({data: data.data});
    }
  }
}

componentDidMount() {
  this.loadData();
  setInterval(this.loadData, 180000); // 3 minutes in milliseconds. 3*60*1000
}

edited Jan 4, 2020 at 14:49

Elham.NE

651 silver badge7 bronze badges

answered Feb 20, 2017 at 21:57

Jo Peyper

3901 silver badge10 bronze badges

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

6 Comments

ni yanwen Over a year ago

thanks for answering, but when I set it at 30 secs, the first time it appear will be after 30 secs, how to avoid this?

Jo Peyper Over a year ago

I've modified my answer for you. basically just call it once first.

ni yanwen Over a year ago

Hey, I have tried your solution, it only works once at the first time when page loaded

Imran Ahmad Over a year ago

Is it best practice to do? I have read this can be achieved with web sockets as well

Jo Peyper Over a year ago

Well today (that answer was a long time ago) you wouldn't use setInterval so directly, you'd probably want to use react hooks to control the interval and other effects in a more declarative way.

|

Collectives™ on Stack Overflow

How to make ajax call auto refresh in react js

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related