ReactJS-Can'；无法从提取访问对象中的属性

我正在提取API，它返回的数据很好，但当我尝试访问属性时，它返回：

错误：对象作为React子对象无效（找到：具有键{品种、类别、id、url、宽度、高度}的对象）。如果要呈现子对象集合，请改用数组

myFetch.jsx

import React, {Component} from "react"

class myFetch extends Component {

    state={
        data:[]
    }

    componentDidMount(){
        const url = "xxxxxxxxxxxxxxxxxxxxxxx"
        fetch(url)
        .then(r=>r.json())
        .then(data=>{
            this.setState({data:data})

            // console.log(data)
    })
    .catch(e=>console.log(e))
    }



    render(){

        const {data} = this.state
        console.log(data[0])
        return (<p>{data[0]}</p>)
    }
}

export default myFetch

import React，{Component}来自“React”
类myFetch扩展了组件{
陈述={
数据：[]
}
componentDidMount（）{
const url=“xxxxxxxxxxxxxxxxxxxx”
获取（url）
.then（r=>r.json（））
。然后（数据=>{
this.setState（{data:data}）
//console.log（数据）
})
.catch（e=>console.log（e））
}
render（）{
const{data}=this.state
console.log（数据[0]）
返回（{data[0]}
）
}
}
导出默认myFetch

编辑

状态中的“数据”初始化为数组。因此，我应该在渲染过程中遍历数组 {data.map（d=>d.url）}并访问我想要的任何属性，如下所示：

render(){

    const {data} = this.state
    console.log(data)
    return (<p>{data.map(d=>d.url)}</p>)
}

render（）{
const{data}=this.state
console.log（数据）
返回（{data.map（d=>d.url）}
）
}

您的状态数据在0索引中没有任何元素。这就是为什么你会得到那个未定义的错误。您可以在尝试渲染它之前检查它是否存在

诸如此类：

render() {
const { data } = this.state;
if (data[0]) {
  console.log(data[0]);
  return <p>{data[0].url}</p>;
}
return null;

render（）{
const{data}=this.state；
如果（数据[0]）{
console.log（数据[0]）；
返回{data[0].url}
；
}
返回null；

---

}

您对该错误消息的解释是什么？因为这对我来说似乎很清楚。如果只是在初始状态下数据没有属性，也许可以用{data.length&&data[0]

}来完成。。。你能复制{consoloe.log（数据[0]）或{//console.log（数据）}吗？我似乎也很清楚，但当我在渲染期间尝试访问属性时，它不起作用。我所做的是在fetch调用期间将数组返回为“this.setState（{data:data[0]}）”。它现在可以工作了，但前提是我在获取过程中返回数据。有没有办法在渲染期间返回数据？什么是“在渲染期间访问属性”？到底发生了什么事？那是在数据[0]还未定义的时候吗？@HagaiHarari我做了一个console.log（数据[0]），它返回了一个对象，当我尝试访问属性时，例如：console.log（数据[0].url），然后我得到一个错误：“TypeError:无法读取未定义的属性'url'”