javascript - Bagaimana untuk menghantar tindakan sekali dalam komponen penghala bertindak balas selepas memadankan komponen penghalaan?
给我你的怀抱
给我你的怀抱 2017-06-28 09:28:21
0
2
840

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

Laluan dikonfigurasikan sebagai komponen Jadual <Route path="/:id" component={ Datagrid }/>,其中 id 为 path 路径,Datagrid 为一个展示数据表格的容器组件,主体内容为antd, di mana lajur dan dataSource diperlukan untuk ditukar mengikut laluan Saya mahu memuatkan lajur dan dataSource pengguna apabila mengklik /user, dan memuatkan lajur dan dataSource odm apabila mengklik /odm.

Komponen datagrid adalah seperti berikut

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

Memang benar lajur pengguna boleh dimuatkan apabila /laluan pengguna diklik, tetapi dalam dispatch(fetchColumn(id))会无限循环,如果把dispatch(fetchColumn(id))放在componentDidMount, ia hanya akan dimuatkan sekali Apabila /odm diklik, komponen Datagrid tidak akan dipaparkan semula buat.

给我你的怀抱
给我你的怀抱

membalas semua(2)
为情所困
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>
    )
  }
}
为情所困

Muatkan lajur dan dataSumber odm apabila /odm diklik.

Kemudian dalam acara klik dispatch.

Anda salah cakap, cuba componentDidUpdate.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan