javascript - 错误:对象作为 React 子项无效/无法在我的 div 中映射元素
问题描述
当我尝试映射通过 Axios 获取的数据时出现此错误:
Error: Objects are not valid as a React child (found: object with keys {id, title}). If you meant to render a collection of children, use an array instead.
in span (at ProductList.js:64)
in div (created by ItemMeta)
in ItemMeta (at ProductList.js:63)
in div (created by ItemContent)
in ItemContent (at ProductList.js:61)
in div (created by Item)
in Item (at ProductList.js:58)
in div (created by ItemGroup)
in ItemGroup (at ProductList.js:55)
in div (created by Container)
in Container (at ProductList.js:38)
in ProductList (created by Context.Consumer)
in Route (at routes.js:10)
in Hoc (at routes.js:8)
in BaseRouter (at App.js:18)
in div (at Layout.js:22)
in CustomLayout (created by Connect(CustomLayout))
in Connect(CustomLayout) (created by Context.Consumer)
in withRouter(Connect(CustomLayout)) (at App.js:17)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:16)
in App (created by Connect(App))
in Connect(App) (at src/index.js:21)
in Provider (at src/index.js:20)
这是我的组件产品的相关代码:
import {
Button,
Container,
Dimmer,
Icon,
Image,
Item,
Label,
Loader,
Message,
Segment,
} from "semantic-ui-react";
import Axios from "axios";
import React from "react";
import { productListURL } from "../constants";
class ProductList extends React.Component {
state = {
loading: false,
error: null,
data: [],
};
componentDidMount() {
this.setState({ loading: true });
Axios.get(productListURL)
.then((res) => {
this.setState({ data: res.data, loading: false });
})
.catch((err) => {
this.setState({ error: err, loading: false });
});
}
render() {
const { data, error, loading } = this.state;
return (
<Container>
{error && (
<Message
negative
header="there is error in your submission"
content={JSON.stringify(error)}
/>
)}
{loading && (
<Segment>
<Dimmer active>
<Loader>Loading</Loader>
</Dimmer>
<Image src="" />
</Segment>
)}
<Item.Group divided>
{data?.map((product) => {
return (
<Item key={product.id}>
<Item.Image src={product.image} />
<Item.Content>
<Item.Header as="a">{product.title}</Item.Header>
<Item.Meta>
<span className="cinema">{product.category}</span>
</Item.Meta>
<Item.Description>{product.description}</Item.Description>
<Item.Extra>
<Button primary floated="right" icon labelPosition="right">
Add to cart
<Icon name="cart plus" />
</Button>
<Label>{product.price}</Label>
</Item.Extra>
</Item.Content>
</Item>
);
})}
</Item.Group>
</Container>
);
}
}
export default ProductList;
我也尝试添加Fragment
并将密钥放在 Fragment 但总是得到相同的错误,我检查了许多类似的问题和答案并尝试更改代码但我总是收到相同的错误任何帮助将不胜感激,谢谢
这是根据一些评论对问题的更新:这里是console.log的数据:
[]
length: 0
__proto__: Array(0)
ProductList.js:36
(2) [{…}, {…}]
0:
category: {id: 1, title: "clothes"}
description: "a black T-shirt for men and women (unisex)"
discount_price: null
id: 1
image: "http://127.0.0.1:8000/media/duo.jpg"
price: 24
slug: "tshirt-black"
title: "Tshirt black"
__proto__: Object
1:
category: {id: 1, title: "clothes"}
description: "White T-shirt for men and women unisex"
discount_price: null
id: 2
image: "http://127.0.0.1:8000/media/2_00d6bb1f5b-asket_tee_white_cart_thumb-original.jpg"
price: 25
slug: "tshirt-white"
title: "Tshirt white"
__proto__: Object
length: 2
__proto__: Array(0)
解决方案
您的 product.category 是一个对象 ({id, title})。所以你不能简单地显示它。我猜你想显示类别标题?试试这个:
import {
Button,
Container,
Dimmer,
Icon,
Image,
Item,
Label,
Loader,
Message,
Segment,
} from "semantic-ui-react";
import Axios from "axios";
import React from "react";
import { productListURL } from "../constants";
class ProductList extends React.Component {
state = {
loading: false,
error: null,
data: [],
};
componentDidMount() {
this.setState({ loading: true });
Axios.get(productListURL)
.then((res) => {
this.setState({ data: res.data, loading: false });
})
.catch((err) => {
this.setState({ error: err, loading: false });
});
}
render() {
const { data, error, loading } = this.state;
return (
<Container>
{error && (
<Message
negative
header="there is error in your submission"
content={JSON.stringify(error)}
/>
)}
{loading && (
<Segment>
<Dimmer active>
<Loader>Loading</Loader>
</Dimmer>
<Image src="" />
</Segment>
)}
<Item.Group divided>
{data?.map((product) => {
return (
<Item key={product.id}>
<Item.Image src={product.image} />
<Item.Content>
<Item.Header as="a">{product.title}</Item.Header>
<Item.Meta>
<span className="cinema">{product.category.title}</span>
</Item.Meta>
<Item.Description>{product.description}</Item.Description>
<Item.Extra>
<Button primary floated="right" icon labelPosition="right">
Add to cart
<Icon name="cart plus" />
</Button>
<Label>{product.price}</Label>
</Item.Extra>
</Item.Content>
</Item>
);
})}
</Item.Group>
</Container>
);
}
}
export default ProductList;
推荐阅读
- django - 如何从共享当前位置的 Google Maps url 以编程方式获取坐标?
- ios - 以编程方式添加 UIView 和 UITableView
- c# - 在 WPF 文本框中,为什么滚动时不活动的选择显示不正确?
- mongodb - MongoDB聚合查询组并计数
- c# - Unity - 构建相机与编辑器的“游戏”相机不同
- google-app-engine - 应如何从 App Engine 添加 Firebase 自定义声明?
- python - 如何将函数或表达式作为参数传递?
- java - 开箱即用 - WebService - DB - 网页/移动访问
- c# - xUnit Assert.Throws 和 Record.Exception 不捕获异常
- amazon-web-services - 使用 SAM 创建 API 密钥和使用计划