TypeError：ecwidData.map不是函式

下面的代碼是從 api 讀取資料，但它會拋出這個錯誤“TypeError: ecwidData.map is not a function”。

注意：我目前是學習 js 和 reactjs 的初學者。

. . .

頁面匯入

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

uj5u.com熱心網友回復：

你應該改變：

<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>

標籤：javascript 反应 休息

上一篇：FastAPIHelloWorld示例：內部服務器錯誤

下一篇：RESTfulAPI訪問控制