錯誤：對象作為 React 子對象無效/無法映射我的 div 中的元素

Question

當我嘗試映射通過 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)

Answer 1

您的 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;

Answer 2

標簽內的 HTML 內容應該是一個字符串。

<p>Hello</p>
<a>Contact Us</a>

如前所述， category鍵不是字符串。 它是一個具有屬性{ id, title}的對象。 你在 a 中渲染它，而 React 拋出同樣的錯誤。 （檢查錯誤堆棧跟蹤中的第二行）。

您可以在span使用以下代碼：

<span className="cinema">{product.category.title}</span>