当前位置: 代码迷 >> 综合 >> React AntDesign 渲染页面 加载对象 加载对象的对象 问题
  详细解决方案

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

热度:89   发布时间:2024-01-04 14:53:05.0

再编写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块儿。这时候就可以渲染出对象的对象了。

  相关解决方案