Question

将 React 中的 js 迁移到 tsx

2021-05-30

64

javascript reactjs next.js

我尝试将我的 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>
  );
}

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

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

Answer 1

首先在服务方法中定义获取的数据类型

const getAllVertification= async(url:string,config?:AxiosRequestConfig):Promise<DataType[]>=>{
  const {data,status} = axios.get<DataType[]>(url,config);
  return data // Note then you do not need read it like, data.data, just data
// if you need status in component you can return status too. Or just a comparison like if(data.length>0) in component
}

其中 DataType 可以是

interface DataType { identityType:string, identityNumber:number,.... }

然后定义状态的类型

const [allData, setAlldata] = useState<DataType[]>([]);

Answer 2

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

Answer 3

您的 allData 在此处被分配给一个空数组

const [allData, setAlldata] = useState([]);

，因此其类型为 never[] 您可以使用

const [allData, setAlldata] = useState<any>([]);

暂时修复错误，直到您为条目定义一个类型。如果您已经有一个类型（或者您最终定义了一个类型），只需用它替换 any
像这样（如果您的类型名为 user ，这与您拥有的数据很相似）：

const [allData, setAlldata] = useState<User>([]);

类型定义看起来像这样：

interface User {
  nationality: string;
  firstName: string;
  province?: string;
}

使用 ? 指定某个字段是可选的，您可以在官方文档

中阅读有关接口的更多信息