如何在反应组件中加载新的 axios 数据

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.

Answer 1

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 eg:

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

Answer 2

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