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

Question

我有一个导航菜单，可以使用 <Link to={"/entity"}>Entities</Link>

正确加载带有 react-router 的组件

组件使用axios加载数据并显示在表格中。我正在努力完成的是在随后单击 <link> 时加载新数据。

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() {
        ...
    }

这适用于加载单组数据。但是，如果我编辑一行并再次打开列表，它将具有最初检索到的内容。给出该代码哪个是正确的行为，但我如何重新加载它？我试过 componentDidUpdate 但这会创建一个无限循环。我假设由于 componentDidUpdate 改变了 DOM 然后再次调用 componentDidUpdate。

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

我考虑过将 onClick={this.handleClick} 添加到菜单并更改状态或传递值以指示新的点击。但是必须有一种方法可以从路由器捕获更新，而不仅仅是组件的更改。

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 e.g:

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

Answer 2

我想出的解决方案是向 link 添加时间戳并将其与之前的时间戳进行比较。

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

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

How to load new axios data in react component

javascript

reactjs

react-router

react-dom