How to load new axios data in react component

Question

I've got a navigation menu that correctly loads components with react-router using <Link to={"/entity"}>Entities</Link>

The components load data using axios and display it in tables. What I'm struggling to accomplish is loading new data when clicking the <link> a subsequent time.

class List extends Component {
    constructor() {
        super();
        this.state = { entities: [], loading: true};
    }

    componentDidMount() {
        this.getData();
        console.log('componentDidMount');
        console.log(this.state.entities);
    }
    getData() {
        axios.get(this.props.url).then(response => {
            this.setState({ entities: response.data, loading: false})
        })
    }


    render() {
        ...
    }

This works well for loading a single set of data. But if I edit a row and open the list again it will have the originally retrieved. Which is the correct behaviour given that code, but how can I reload that? I've tried componentDidUpdate but that creates an infinite loop. I'm assuming due to componentDidUpdate changing the DOM which then again calls componentDidUpdate again.

    componentDidUpdate(prevProps) {
        this.getData();
        console.log('componentDidUpdate');
    }

I thought about doing something like adding onClick={this.handleClick} to the menus and changing states or passing values to indicate a new click. But there must be a way to catch an update from router and not just a change of the component.

hamed dehghan · Answer 1 · 2021-11-01T08:08:49.347

0

If you use setState inside componentDidUpdate it updates the component, resulting in a call to componentDidUpdate which subsequently calls setState again resulting in the infinite loop. You should conditionally call setState and ensure that the condition violating the call occurs eventually e.g:

componentDidUpdate(previousProps, previousState) {
    if (previousProps.data !== this.props.data) {
        this.setState({/*....*/})
    }
}

edited Nov 01 '21 at 08:08

answered Nov 01 '21 at 07:44

hamed dehghan

471
7
15

I don't want to update the data every second. I want to update the data when I open the page (click the link). – Bradmage Nov 01 '21 at 07:56
@Bradmage I got your question and changed the answer.Please check it! – hamed dehghan Nov 01 '21 at 08:09
Thanks for that. I'll do some testing in the morning, maybe changing that to previousState !== this.state might work. As clicking a doesn't actually change any props, it just calls an update. Unless there is something internal that changes in props I'm not seeing. – Bradmage Nov 01 '21 at 09:09
@Bradmage Hope that help you... – hamed dehghan Nov 01 '21 at 09:21
As I thought, there is no prop or state change just from clicking a component. If there was a way to know if the update was called by this link I could update the data in `render()` – Bradmage Nov 01 '21 at 21:56

score 0 · Accepted Answer · answered Nov 07 '21 at 01:04

The solution I came up with was to add a datestamp to the link and compare that to the previous timestamp.

<Link to={{"/entity", state: { update: + new Date() } }}>Entities</Link>

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.update !== this.props.update) {
            this.setState({ loading: true })
            this.getData();
            //console.log('Data Updating - ' + this.props.update);
        }
    }

How to load new axios data in react component

2 Answers2