react 组件中获取不到值解决方法

香菊网 发表于: 2019-05-31 分类: js部分  前端front  H5部分  

在我们开发react的时候需要引入很多组件,但有的子组件是父组件数据没传过去的时候就已经加载出来了, render里面是可以获取的,但是如果我们想在子组件里面操作数据就只能用compontentDidMount, 这个时候compontentDidMount里面加载不出来,解决方案就是等父组件数据获取成功之后再渲染子组件。

 

1、父组件

import React, { Component, Fragment } from 'react'
import { connect } from 'dva'
import Mock from 'mockjs';
import { Form, Input, Upload, Radio, Button, Icon, message, Modal } from 'antd'
import DeployForm from './component/DeployForm'

class categoryEdit extends Component {
    componentDidMount() {
        // 编辑还是新增  loadIngModal: 控制组件加载
        if(this.state.editCid){
            const { dispatch } = this.props
            // 获取数据
            dispatch({
                type: 'categoryModel/getCategoryMsg',
                payload: {
                    foreId: this.state.editCid
                }
            }).then(()=>{
                const { editCateData } = this.props.categoryModel
                this.setState({ editCateData, loadIngModal: true })
            })
        }else {
            this.setState({ loadIngModal:true })
        }
    }
    render() {
        return(
            {/*状态为true的时候加载子组件*/}
            {this.state.loadIngModal && <DeployForm propsData={this.state.editCateData}></DeployForm> }
        )
    }
}

2、子组件

class categoryEditChild extends Component {
    componentDidMount() {
        // 打印父组件传过来的值 并且可以setState
        console.log('props', this.props)
    }
    render() {
        return(
            <div>子组件</div>
        )
    }
}

 

标签: js部分前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮