Used react, react-router 4.1.1, redux 3.7.0, react-redux 5.0.5
Route is configured as, where id is the path path, Datagrid is a container component that displays the data table, and the main content is In the Table component ofantd, the columns and dataSource are required to be switched according to the path. I want to load the user's columns and dataSource when /user is clicked, and load the odm's columns and dataSource when /odm is clicked.
Datagrid components are as follows
import React, { Component } from 'react' import { Table, Button } from 'antd' import './index.less' import { fetchColumn } from '../../actions/column' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' class Datagrid extends Component { render() { let id = this.props.match.params.id console.log(id) this.props.dispatch(fetchColumn(id)) return (
) } } const mapStateToProps = (state) => { return state } export default withRouter(connect(mapStateToProps)(Datagrid))
When you click /user path, you can indeed load the user's column, butdispatch(fetchColumn(id))will loop infinitely. If you putdispatch(fetchColumn(id))IncomponentDidMount, it will only be loaded once. When /odm is clicked, the Datagrid component will not re-render. I don't know what to do.
Then justdispatchin the click event.You said it wrong, try
componentDidUpdate.