javascript - Wie kann ich eine Aktion einmal in der Komponente auslösen, nachdem der React-Router mit der Routing-Komponente übereinstimmt?

Question

Verwendete React, React-Router 4.1.1, Redux 3.7.0, React-Redux 5.0.5

Route ist als Tabellenkomponente von <Route path="/:id" component={ Datagrid }/>,其中 id 为 path 路径，Datagrid 为一个展示数据表格的容器组件，主体内容为antd konfiguriert, wobei Spalten und Datenquelle entsprechend dem Pfad gewechselt werden müssen. Ich möchte die Spalten und die Datenquelle des Benutzers laden, wenn ich auf /user klicke, und die Spalten und die Datenquelle von odm laden, wenn ich auf /odm klicke.

Datagrid-Komponenten sind wie folgt

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

Es stimmt, dass die Spalte des Benutzers geladen werden kann, wenn auf den /user-Pfad geklickt wird, aber in dispatch(fetchColumn(id))会无限循环，如果把dispatch(fetchColumn(id))放在componentDidMount wird sie nur einmal geladen. Wenn auf /odm geklickt wird, weiß ich nicht, was zu tun ist Tun.

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

当点击/odm 时加载 odm 的 columns 和 dataSource。

那就在点击事件里 dispatch 呗。

说错了，试试 componentDidUpdate。