【REACT】父组件异步获取数据传递至子组件,但无法刷新

实际情况;
做一个面包屑的header,如图:
在这里插入图片描述
我的逻辑顺序:

父组件didMount用ajax异步获取后端数据====》setState到父组件的state中=====》用props传给子组件====》子组件使用state接受props中的数据====》子组件render的代码使用state的数据

上代码
父组件

  componentDidMount() {
        this.getNonPhysicalRejectReason();
    }

    async getNonPhysicalRejectReason() {
        let TableUrl = UrlUtil.getConfigUrl('UI_API_GATEWAY_PROXY', 'CALC', 'BASICINFO') + this.state.CaseNo;
        await AjaxUtil.call(TableUrl, null, { method: 'GET' }).then((data) => {
            return this.setState(data);
        })
    }

render(){
.......
 < AdvCascade   isEnableSeachData={this.state.isEnableSeachData}
              	searchabled={this.state.searchabled}
               	option={this.state.Option}
               	optionsa={this.state.Optionsa}
               	ops='Ops'/>
               	
........
}

子组件

export default class AdvCascade extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isEnableSeachData: null,
            searchabled: null,
            optionsa: null,
            option: null,
            ops: null
        };
    }
    // 外部传入的事件
    handleCallback(e) {
        const arr = (e.newValue.allVal).split('/');
        if (arr.length == 1) {
            console.log('1');
        } else if (arr.length == 2) {
            console.log('2');
        } else if (arr.length == 3) {
            console.log('3');
        }
    }
    render() {
        return (
            <Fragment>
                <UIAdvCascade ignorePageReadOnly="false" layout='horizontal' label="common" name="test" isEnableSeachData={this.state.isEnableSeachData}
                    searchabled={this.props.searchabled}
                    dataSource={this.props.optionsa}
                    handleEvent={this.handleCallback}
                    model={this.props.option}
                    property={this.props.ops}
                />
            </Fragment>
        );
    }
}

总结:

  • 注意一

props传递时,需要在子组件中直接使用props中的数据。

  • 注意二
    若是想使用子组件中state来管理状态,需要使用raect的钩子函数…(还没查明白,下次弥补)

留下的问题:

  1. 对于一个json,若何调用key的本身呢,如下:
//json
const data = {
'ops':'1223456'
}
//想要获取data的'ops'本身的字符串该如何操作呢
  1. 对于react的生命周期不熟悉,导致对于子组件的加载渲染数据不成功,没法解决。
  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值