javascript - react router 匹配路由组件后如何在组件中 dispatch action 一次?
问题描述
用到了 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 组件又不会重新渲染了,不知道该怎么搞。
问题解答
回答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> ) }}回答2:
当点击/odm 时加载 odm 的 columns 和 dataSource。
那就在点击事件里 dispatch 呗。
说错了,试试 componentDidUpdate。
相关文章:
1. docker镜像push报错2. docker安装后出现Cannot connect to the Docker daemon.3. docker - 各位电脑上有多少个容器啊?容器一多,自己都搞混了,咋办呢?4. angular.js - angularjs的自定义过滤器如何给文字加颜色?5. dockerfile - 我用docker build的时候出现下边问题 麻烦帮我看一下6. angular.js使用$resource服务把数据存入mongodb的问题。7. 我在centos容器里安装docker,也就是在容器里安装容器,报错了?8. docker绑定了nginx端口 外部访问不到9. 关于docker下的nginx压力测试10. docker api 开发的端口怎么获取?