TypeError: ecwidData.map is not a function

Question

下面的这段代码是从 api 中读取数据，但它抛出了这个错误“TypeError：ecwidData.map 不是一个函数”。

Note: I'm a beginner learning js and reactjs currently.

。 . .

页面导入

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Table } from "semantic-ui-react";

..............

函数代码

export default function Read() {
  let [ecwidData, setEcwidData] = useState([]);
  useEffect(() => {
    axios.get(
        'apiurl'
      )
      .then((response) => {
        setEcwidData(response.data);
      })
      .catch((error) => {
        document.write(error);
      })
  }, [])
  return (
    <div>
      <Table singleLine>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>ID</Table.HeaderCell>
            <Table.HeaderCell>Category</Table.HeaderCell>
            <Table.HeaderCell>Description</Table.HeaderCell>
            <Table.HeaderCell>URL</Table.HeaderCell>
            <Table.HeaderCell>Products count</Table.HeaderCell>
            <Table.HeaderCell>Enabled</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {ecwidData.map((data) => {
            return (
              <Table.Row>
                <Table.Cell>{data.id}</Table.Cell>
                <Table.Cell>{data.name}</Table.Cell>
                <Table.Cell>{data.description}</Table.Cell>
                <Table.Cell>{data.url}</Table.Cell>
                <Table.Cell>{data.productCount}</Table.Cell>
                <Table.Cell>{data.enabled}</Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    </div>
  );
}

…… …… 这是在浏览器中调用 api 的 api 响应： …… ......

{
    "total": 58,
    "count": 58,
    "offset": 0,
    "limit": 100,
    "items": [
        {
            "id": 127443167,
            "parentId": 127443594,
            "orderBy": 10,
            "name": "Bathroom robe",
            "nameTranslated": {
                "ar": "Bathroom robe",
                "en": "",
                "fr": ""
            },
            "url": "",
            "productCount": 0,
            "description": "",
            "descriptionTranslated": {
                "ar": "",
                "en": "",
                "fr": ""
            },
            "enabled": true,
            "isSampleCategory": false
        }
... etc

Answer 1

你应该改变：

<Table.Body>
  {ecwidData.map((data) => { return (
  <Table.Row>
    <Table.Cell>{data.id}</Table.Cell>
    <Table.Cell>{data.name}</Table.Cell>
    <Table.Cell>{data.description}</Table.Cell>
    <Table.Cell>{data.url}</Table.Cell>
    <Table.Cell>{data.productCount}</Table.Cell>
    <Table.Cell>{data.enabled}</Table.Cell>
  </Table.Row>
  ); })}
</Table.Body>

至

<Table.Body>
  {ecwidData?.items?.map((data) => { return (
  <Table.Row>
    <Table.Cell>{data.id}</Table.Cell>
    <Table.Cell>{data.name}</Table.Cell>
    <Table.Cell>{data.description}</Table.Cell>
    <Table.Cell>{data.url}</Table.Cell>
    <Table.Cell>{data.productCount}</Table.Cell>
    <Table.Cell>{data.enabled}</Table.Cell>
  </Table.Row>
  ); })}
</Table.Body>

Answer 2

我通过直接访问嵌套对象找到了更好的解决方案！

    <Table.Body>
  {ecwidData.map((data) => { return (
  <Table.Row>
    <Table.Cell>{data.items.id}</Table.Cell>
    <Table.Cell>{data.items.name}</Table.Cell>
    <Table.Cell>{data.items.description}</Table.Cell>
    <Table.Cell>{data.items.url}</Table.Cell>
    <Table.Cell>{data.items.productCount}</Table.Cell>
    <Table.Cell>{data.items.enabled}</Table.Cell>
  </Table.Row>
  ); })}
</Table.Body>

TypeError: ecwidData.map is not a function

TypeError: ecwidData.map is not a function

javascript

rest

reactjs