javascript - 在反应中将 js 迁移到 tsx

Question

我尝试将我的 js 文件迁移到 tsx。

当页面加载页面时，alldata 将从我的 api 设置，所以在 api 设置之前，alldata 只是空数组

import classes from "./vertification.module.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { getAllVertification } from "../../helpers/database";
import { useEffect, useState } from "react";
export default function Vertification() {
  const [update, setUpdate] = useState(false);
  const [allData, setAlldata] = useState([]);
  useEffect(() => {
    const data = async () => {
      const data = await getAllVertification();
      if (!data.status) {
      } else {
        setAlldata(data.data);
      }
    };

    data();
  }, [update]);
  return (
    <div className={classes.vertification}>
      <div className={classes.tab}>
        <table>
          <tbody>
            {allData.map((data, key) => {
              return (
                <tr key={key}>
                  <td>{data.identityType.toUpperCase()}</td>
                  <td>{data.identityNumber}</td>
                  <td>{data.nationality}</td>
                  <td>{data.firstName}</td>
                  <td>{data.secondName}</td>
                  <td>
                    {data.gender.charAt(0).toUpperCase() + data.gender.slice(1)}
                  </td>
                  <td>{data.birthDate}</td>
                  <td>{data.bornCountry}</td>
                  <td>{data.profession}</td>
                  <td>{data.province}</td>
                  <td>{data.city}</td>
                  <td>{data.address}</td>
                  <td>{data.postCode}</td>
                  <td>img</td>
                  <td>
                    <button>
                      <FontAwesomeIcon icon={faCheck} />
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

实际上我的代码在运行时仍然可以正常工作，但是收到这样的警告

有人可以向我解释并帮助我解决它吗？

标签： javascriptreactjsnext.js

Answer 1

您可以添加 { allData && allData.map((data, key)} 来验证空数组是否有效。此外，您应该在初始化变量时定义数据类型。