使用从 JSON 数组转换的对象填充 typescript/react 中的数组

Question

我有一个 JSON-文件，其中包含大约 700 行的设备和一些关于它们的信息（即序列号、macadress、端口...）。

在另一个文件中，我创建了一个对象，如

type jsonObj = {
serialNumber: string;
macAdress: string;
port: string;
}

现在我想用这个 jsonDevice 对象循环填充 table，但不知何故我无法让它工作。

我的代码是这样的：

const ObjectTable: FC = () => {
  const entities: jsonObj[] = [
    {
      serNom: jsonDevices[0].serNom,  //jsonDevices is my json file
      macAdr: jsonDevices[0].macAdr,
      tunPort: jsonDevices[0].tunPort
    },
  ];

FC 是从 React 导入的，上面的代码可以正常工作。我收到一个 table-输出，其中包含此行的数据（例如 jsonDevices[0].serNom 正确地给我 123456789）但现在我想自动填充整个 list/array来自 json 台设备的剩余行。在 Java 中，我会用这样的循环来解决它：

for (int i = 0, i<jsonObj.length, i++){
    ObjectTable.add(jsonObj[i].serNom);
    ObjectTable.add(jsonObj[i].macAdr);
    ObjectTable.add(jsonObj[i].tunPort);
    }

请帮助我。这个问题让我很头疼。

Answer 1

注意：您的代码将无法编译，因为您已将 jsonObj 类型声明为具有以下形状：

type jsonObj = {
  serialNumber: string;
  macAdress: string;
  port: string;
}

但是您正在尝试创建使用不同键名的 jsonObj 个对象的数组：

{
  serNom: jsonDevices[0].serNom,  //jsonDevices is my json file
  macAdr: jsonDevices[0].macAdr,
  tunPort: jsonDevices[0].tunPort
}

除此之外，您的问题的解决方案比看起来简单得多：Array.prototype.map:

const entities: jsonObj[] = jsonDevices.map((device) => {
  return {
    serialNumber: device.serNom,
    macAddress: device.macAdr,
    port: device.tunPort,
  };
});

另一个注意事项：这些缩写的变量名很难阅读。我建议选择一个约定并坚持下去。如果您的 JSON 文件遵循 jsonObj 的命名约定，那么您甚至不需要将 JSON 映射到不同的形状——您只需这样做：

const entities = jsonDevices as jsonObj[];

（这被称为 type assertion——使用 as 关键字后跟一个类型来确保 TypeScript 编译器 left-hand 值是指定的类型。）

Answer 2

假设您有这样的数据：

[
    { id: 1, name: "test-1" },
    { id: 2, name: "test-random" },
    { id: 3, desc: "444" }
]

并且你有这个数据的一些结构，创建一个 interface

interface SomeInterface {
  id: number;
  name?: string;
  desc?: string;
}

现在很简单，如果 JSON 输入数据被称为 someData 并且结果数据被称为 hmm，你可以像这样：

const hmm: SomeInterface[] = [];
someData.map((data) => {
      hmm.push(data as SomeInterface);
});

您还可以通过以下方式简化：

hmm: SomeInterface[] = someData as SomeInterface[];

这是一个codesandbox，可以随意使用它：https://codesandbox.io/s/dreamy-chatelet-hr5ub6?file=/src/App.tsx:343-456

这里有两个关于同一个问题的 sof 线程，讨论为什么 interface over types:

使用从 JSON 数组转换的对象填充 typescript/react 中的数组

filling an array in typescript/react with objects converted from JSON array

javascript

typescript

reactjs

antd