Question

我正在提取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

编辑

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

render(){

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

Answer 1

您的州数据在0索引上没有任何元素。这就是为什么您会收到未定义的错误的原因。您可以在尝试渲染之前检查它是否存在。

类似的东西：

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

}

ReactJS-无法通过获取访问对象中的属性

1 个答案: