React AntDesign 渲染页面 加载对象 加载对象的对象 问题

再编写antDesign时，使用的函数的形式定义的页面

const questionInfo = (props) => {}

在初始化的同时，去请求的后端的接口数据，获取接口数据后，使用

const [questionInfo, setQuestionInfo] = useState({});//详情信息

将数据放到questionInfo对象里，

在return函数中，使用questionInfo.属性名的方式来显示获取到的对象的数据。

但是返回的数据对象的json格式是{

        name：‘123123’,

        age:11,

        brother:[{

                bName:'我是兄弟',

                age:'5’，

},

{

        bName:'我是洗的2',

        age：‘66’，

]

}

就是对象里有一个兄弟brother的对象数组，普通的属性，可以直接在页面中通过

questionInfo.属性名   来获取到值，如上main的questionInfo.name 、 questionInfo.age

但是直接使用questionInfo.brother[0].bName 获取对象的对象数组中第一个对象的名字时，前台直接报了questionInfo.brother is undefined 的错误。

个人理解，浏览器与js可以解析最表明的对象的数据，选渲染了页面，当数据有时js会自动更新页面，也就是questionInfo.name不报错。有数据的时候就显示。

但是对象对象浏览器js无法直接突破第一层对象，对象的属性不是字符串，而是object 。所以就报了undefined，因为在渲染页面的时候还没有获取到后端返回的数据。

解决的方法是在加载数据的div块儿前加一层js判断

{questionInfo.brother !== undefined &&
    (
    <div>提交时间：{questionInfo.brother[0].bName}</div>
    )
}

当questionInfo有数据的时候，才会去渲染这个div块儿。这时候就可以渲染出对象的对象了。