javascript React使用表:TypeError:无法读取未定义的属性(正在阅读“forEach”)

nbnkbykc  于 2023-01-11  发布在  Java
关注(0)|答案(4)|浏览(133)

快速帮助!当我试图将数据渲染到react表中时,我得到了上面的错误。数据通过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;

下面是COLUMNS,它包含每列的标题

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

{
    "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
        },
       
    ]
}

如何修复 TypeError:无法读取未定义的属性(阅读“forEach”)
谢谢

6tr1vspr

6tr1vspr1#

我为你找到了解决办法。我也遇到了同样的问题。
useTable钩子中,必须传递useTable({ columns, data: 'yourData' }),因为accessRows forEach是针对关键字data的。

68bkxrlz

68bkxrlz2#

请尝试以下操作:

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

ReactTable需要数组数据,但data的初始数据类型为object,因此forEach无效。

qmelpv7a

qmelpv7a3#

也许第一次渲染没有得到值。你可以尝试在你的对象后面使用条件链接'?'。比如rows?.map((row)

neskvpey

neskvpey4#

我以前

*..... = useTable(
    {
      data: data || [], ....*

相关问题