在嵌套响应中设置状态

Question

我正在构建一个react应用程序，我正在用api/nested response/nested state设置state，但状态不是我想要的方式。

从api接收到的响应

[
{
"id": 70,
"title": "feefifef",
"images": [
{
"id": 28,
"text": "First Image"
"blog_id": 70,
},
{
"id": 28,
"text": "First Image",
"blog_id": 70,
}
]
}
]

App.js

class App extends React.Component {
constructor(props){
super(props)
this.state = {
blogs = [
{
id: 0,
title: "",
images: [
{
id:0, 
text:""
}
]
}
]
}
}
componentDidMount() {
let data;
axios.get('http://127.0.0.1:8000/api/blogs/').then((res) => {
data = res.data;
this.setState({
blogs: data.map((blog) => {
return Object.assign({}, blog, {
id: blog.id,
title: blog.title,
images: blog.images,
}
})
})
})
}
render() {
const blogs = this.state.blogs.map((blog) => (
<BlogList
id={blog.id}
title={blog.title}
images={blog.images}
/>
))
}
return (
<div>{blogs}</div>
)
}

class BlogList extends React.Component {
constructor(props){
super(props)
}

return (
<div>
Title: {this.props.title}
Images: {this.props.images}
</div>
)
}

问题是什么

Title后图像不显示。我试图在每个博客的BlogList类中显示所有图像。

我也试过使用(在BlogList class)

this.props.images.map((img) => {
return (
<div>
Title: {this.props.title}
Images: {img.text}
</div>
)
}

但它告诉我

this.props.images。Map不是函数

那么我认为问题是与setting state的图像(我可能是错的)。

当我试图打印this.props.images时，它显示

0: {id: 28, text: '1111', blog_id: 71}
length: 1
[[Prototype]]: Array(0)

我是新的反应，任何帮助将非常感激。提前谢谢你

Answer 1

this.props。Images是一个数组，因此你不能使用{this.props。图片直接}。否则，你会得到这样的错误"对象作为React子对象无效。如果要呈现子元素的集合，请使用数组而不是">

你必须使用像这样的东西

render() {
return (
<div>
Title: {this.props.title} <br/>
Images:
{this.props.images?.map((image, i) => (
<div key={image.id}>
{image.id}<br/>
{image.text}<br/>
{image.blog_id} <br/>
</div>
))}
</div>
);
}