react 组件相关问题

Question

组件A和组件B,组件B是个弹出框。
需求是点击A里的某个按钮，然后B组件才请求数据并弹出显示B组件需要渲染的数据。
一般都会事先把B需要渲染的数据结构在B里都写好，以便B数据请求成功后渲染。
但是，当A组件加载完成后，B组件其实还没有请求数据，不点击按钮加载B组件时，在B组件写好的数据不能用，会报变量未定义，或找不到。。。
这个时候有什么好的解决方案吗？我可能会判断数据存不存在（比如 response && response.data && response.data.list...）？但是有时候结构很深，就很长，我想知道是不是我的解决思路有问题？ 大家讨论下啊

Answer 1

这个很简单的！我就简单写一下！

import React, { Component } from 'react'; 
// B组件
import ComponentB from './ComponentB';

// A组件 
class ComponentA extends Component {
    constructor(props) {
        super(props);
        this.state = {
            aData: ''
        };
    }
    componentDidMount() {
        // 其他操作
    }
    async openModal() { // 打开弹窗
        const res = await ...; // 利用async await请求数据，具体按照自己的
        this.setState({
            aData: res
        });
    }
   
    render() {
        const { aData } = this.state;
        return (
            <div className='my-container'>
                <div onClick={()=>this.openModal()}>打开弹窗</div>
                { aData ? <ComponentB aData={aData} /> : null }
            </div>
        )
    }
}

export default ComponentA;

Answer 2

render函数中，添加条件判断，必须得条件满足之后才进行渲染。具体的渲染逻辑中，做好数据的兼容性处理（如不存在，或者默认值等）

{xxx && xxx.xxx && xxx.xxx.xxx &&
    <div>{xxx.xxx.xxx}</div>
}

Answer 3

使用 lodash 的 get 方法来判断数据是否已经存在，可以简单点。。