javascript - Comment distribuer une action une fois dans le composant de routeur React après avoir fait correspondre le composant de routage ?

Question

Utilisé React, React-Router 4.1.1, Redux 3.7.0, React-Redux 5.0.5

Route est configuré en tant que composant Table de <Route path="/:id" component={ Datagrid }/>,其中 id 为 path 路径，Datagrid 为一个展示数据表格的容器组件，主体内容为antd, où les colonnes et la source de données doivent être commutées en fonction du chemin. Je souhaite charger les colonnes et la source de données de l'utilisateur lorsque vous cliquez sur /user, et charger les colonnes et la source de données d'odm lorsque vous cliquez sur /odm.

Les composants de Datagrid sont les suivants

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

Il est vrai que la colonne de l'utilisateur peut être chargée lorsque l'on clique sur /user path, mais dans dispatch(fetchColumn(id))会无限循环，如果把dispatch(fetchColumn(id))放在componentDidMount, elle ne sera chargée qu'une seule fois. Lorsque l'on clique sur /odm, le composant Datagrid ne sera pas restitué. faire.

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

Chargez les colonnes et la source de données d'odm lorsque vous cliquez sur /odm.

Puis dans l'événement clic dispatch.

Vous l'avez mal dit, essayez componentDidUpdate.