javascript - How to dispatch action once in react router component after matching routing component?
给我你的怀抱
给我你的怀抱 2017-06-28 09:28:21
0
2
751

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

Route is configured as, 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 ofantd, 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 ( 

) } } const mapStateToProps = (state) => { return state } export default withRouter(connect(mapStateToProps)(Datagrid))

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

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

reply all (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 ( 

) } }
    为情所困

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

    Then justdispatchin the click event.

    You said it wrong, trycomponentDidUpdate.

      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template
      About us Disclaimer Sitemap
      php.cn:Public welfare online PHP training,Help PHP learners grow quickly!