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