React UseTable：类型错误：无法读取未定义的属性（读取“forEach”）

Question

这里有快速帮助！当我尝试将数据渲染到反应表中时，出现上述错误。数据来自 axios 的 api。

这是代码

import axios from "axios";
import React, { useEffect, useState, useMemo } from "react";
import "./Modal.css";
import { useTable } from "react-table";
import { COLUMNS } from "./columns";
import "./my_style.css";
const ViewTcMapping = () => {
  const [data, setData] = useState({});

  const baseURL =
    "http://127.0.0.1:8000/api/business_process/risk_tc_mapping_details";

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert("No Data To Show");
        }
      )
      .catch((err) => {
        return false;
      });
  }, []);

  const columns = useMemo(() => COLUMNS, []);
  const mydata = useMemo(() => data, []);
  const tableInstance = useTable({
    columns,
    mydata,
  });

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = tableInstance;
  return (
    <div className="z-100 flex justify-center items-center">
      <div className="text-black">
        <div className="rounded overflow-hidden flex  justify-center items-center">
          <table {...getTableProps()} class="GeneratedTable">
            <thead>
              {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column) => (
                    <th {...column.getHeaderGroupProps()}>
                      {column.render("Header")}
                    </th>
                  ))}
                </tr>
              ))}
            </thead>

            <tbody {...getTableBodyProps()}>
              {rows.map((row) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps}>
                    {row.cells.map((cell) => {
                      return (
                        <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                      );
                    })}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default ViewTcMapping;

这是包含每列标题的列

export const COLUMNS = [
  {
    Header: "Cost",
    accessor: "cost_category",
  },
  {
    Header: "Path",
    accessor: "path",
  },
  {
    Header: "Threat Category (PK)",
    accessor: "threat_category",
  },
  {
    Header: "Threats (ISO)",
    accessor: "threats",
  },
  {
    Header: "Asset Type",
    accessor: "asset_type",
  },
  {
    Header: "Comment",
    accessor: "comment",
  },
  {
    Header: "Operational",
    accessor: "operational",
  },
  {
    Header: "Reputational",
    accessor: "reputational",
  },
  {
    Header: "Financial",
    accessor: "financial",
  },
  {
    Header: "Health and Safety",
    accessor: "health_and_safety",
  },
  {
    Header: "Environmental",
    accessor: "environment",
  },
];

这是我想要渲染到表中的 api json 数据

{
    "tc_mapping_details": [
        {
            "cost_category": "Malicious Attacks",
            "path": "Entry",
            "threat_category": "Phishing",
            "threats": "Social engineering",
            "asset_type": "User",
            "comment": "Phishing by itself may not cause a breach, unless it is in combination with middle and end activities. Loss event (Breach) is calculated per exposed path that leads to the end action. For the rest, loss can be treated merely as an incident",
            "operational": "I",
            "reputational": null,
            "financial": null,
            "health_and_safety": null,
            "environment": null
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "Middle",
            "threat_category": "Ransom-ware",
            "threats": "Malicious code",
            "asset_type": "Email Properties",
            "comment": "Ransomware can't launch on it own. It needs an Entry point. It needs an End point for Extortion or Breach (For example, Data Tampering or Data Compromise resp,)..",
            "operational": "I",
            "reputational": "I",
            "financial": "I",
            "health_and_safety": null,
            "environment": null
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "Middle",
            "threat_category": "Malicious Software (Malware, Virus etc.)",
            "threats": "Malicious code",
            "asset_type": "Server, Network",
            "comment": "Ransomware can't launch on it own. It needs an Entry point. It needs an End point for an Attack or Breach (For example, Data Tampering or Data Compromise resp,)..",
            "operational": "I",
            "reputational": null,
            "financial": null,
            "health_and_safety": null,
            "environment": null
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "Middle",
            "threat_category": "Espionage",
            "threats": "Software espionage",
            "asset_type": null,
            "comment": null,
            "operational": "I",
            "reputational": null,
            "financial": "I",
            "health_and_safety": null,
            "environment": null
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "Middle",
            "threat_category": "Espionage",
            "threats": "Industrial espionage",
            "asset_type": null,
            "comment": null,
            "operational": "I",
            "reputational": "I",
            "financial": "I",
            "health_and_safety": "I",
            "environment": "I"
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "Entry",
            "threat_category": "Web Vulnerabilities",
            "threats": "Vulnerability",
            "asset_type": "Web Properties",
            "comment": null,
            "operational": "I",
            "reputational": null,
            "financial": "I",
            "health_and_safety": null,
            "environment": null
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "Entry",
            "threat_category": "3rd Party Vulnerabilities (inc. Software)",
            "threats": "Vulnerability",
            "asset_type": null,
            "comment": null,
            "operational": "I",
            "reputational": "I",
            "financial": "I",
            "health_and_safety": null,
            "environment": null
        },
        {
            "cost_category": "Malicious Attacks",
            "path": "End",
            "threat_category": "Fraud",
            "threats": "Fraud",
            "asset_type": null,
            "comment": null,
            "operational": "B",
            "reputational": "B",
            "financial": "B",
            "health_and_safety": null,
            "environment": null
        },
       
    ]
}

如何修复类型错误：无法读取未定义的属性（读取“forEach”）？

谢谢

Answer 1

我为你找到了解决方案。我刚刚遇到了同样的问题。

在

useTable

挂钩中，您必须传递

useTable({ columns, data: 'yourData' })

，因为 accessRows

forEach

用于关键字

data

。

Answer 2

尝试如下：

const ViewTcMapping = () => {
  const [data, setData] = useState([]);
  ...
}

ReactTable

需要数组数据，但

data

的初始数据类型是

object

，所以

forEach

无效。

Answer 3

也许第一次渲染没有获取值。 您可以尝试使用条件链接“？”在你的对象之后。 喜欢

rows?.map((row)

Answer 4

在将数据道具传递到表时，您可以像下面一样通过提供空数组来传递，这会在数组变得未定义或为空时为您提供帮助，`

<Table data={this.props.studentList || []} />

在此代码中，如果 this.props.studentList 未定义或为 null，它将默认为空数组，这是处理此类情况的安全且常用的方法。这有助于防止数据丢失或尚不可用时出现错误。