javascript - react router 匹配路由元件後如何在元件中 dispatch action 一次？

Question

用到了 react, react-router 4.1.1, redux 3.7.0, react-redux 5.0.5

Route配置為<Route path="/:id" component={ Datagrid }/>,其中id 為path 路徑，Datagrid 為一個展示資料表格的容器元件，主體內容為antd的Table 元件，其中columns 和dataSource 要求能根據path 切換，我想實現當點擊/user 時載入user 的columns 和dataSource，當點擊/odm 時載入odm 的columns 和dataSource。

Datagrid 元件如下

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

當點選/user path 時確實可以載入user 的column，但是dispatch(fetchColumn(id))會無限循環，如果把dispatch(fetchColumn(id))放在componentDidMount中，只會載入一次，點擊/odm 時Datagrid 元件又不會重新渲染了，不知道該怎麼搞。

Answer 1

雷雷

Answer 2

當點擊/odm 時載入 odm 的 columns 和 dataSource。

那就在點擊事件裡 dispatch 唄。

說錯了，試試 componentDidUpdate。