javascript - How to dispatch action once in react router component after matching routing component?

Question

Used react, react-router 4.1.1, redux 3.7.0, react-redux 5.0.5

Route is configured as<Route path="/:id" component={ Datagrid }/>, 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 of antd, 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 (
      <p>
        <Table
          columns={this.props.column}
        />
      </p>
    )
  }
}

const mapStateToProps = (state) => {
  return state
}

export default withRouter(connect(mapStateToProps)(Datagrid))

When you click /user path, you can indeed load the user's column, but dispatch(fetchColumn(id)) will loop infinitely. If you put dispatch(fetchColumn(id)) In componentDidMount, it will only be loaded once. When /odm is clicked, the Datagrid component will not re-render. I don't know what to do.

Answer 1

class Datagrid extends Component {
  //用于第一次挂载时请求
  componentDidMount() {
    let id = this.props.match.params.id
    console.log(id)
    this.props.dispatch(fetchColumn(id))
  }

  //当props发生改变时请求
  componentWillReceiveProps(nextProps) {
    let id = this.props.match.params.id
    console.log(id)
    if(this.props.match.params.id != nextProps.match.params.id) {
        this.props.dispatch(fetchColumn(nextProps.match.params.id))
    }
  }

  render() {
    return (
      <p>
        <Table
          columns={this.props.column}
        />
      </p>
    )
  }
}

Answer 2

Load the columns and dataSource of odm when /odm is clicked.

Then just dispatch in the click event.

You said it wrong, try componentDidUpdate.