时间戳

首页 > 解决方案 > 在打字稿反应中循环遍历数组时显示下一个数据

javascript - 在打字稿反应中循环遍历数组时显示下一个数据

问题描述

所以，我试图在反应打字稿中将一些数据添加到两个不同的数组中

const [deviceNames, setDeviceNames] = useState<Array<string>>([])
  const [serialNumbers, setSerialNumbers] = useState<Array<string>>([])

我现在在这里循环遍历数组并显示内容

{deviceNames.length > 0 &&
      serialNumbers.length > 0 &&
      deviceNames.map(deviceName => {
        return serialNumbers.map(serialNumber => {
          return (
            <CardDevice
              deviceName={deviceName}
              serialNumber={serialNumber}
            />
          )
        })
      })}

我通过单击一个按钮然后显示模态然后像这样将数据添加到这些数组

 onSubmit = (values: any) => {
    clearError()
    setAddDevice(false)
    setDeviceNames(deviceName => [...deviceName, values.deviceName])
    setSerialNumbers(serialNumber => [...serialNumber, values.serialNumber])
  }

我正在使用反应钩子形式。所以我想要的是每当我遍历两个数组时，每次它都应该显示刚刚添加到数组中的内容，而不是最后一个已经添加和显示的内容。我希望我能在这里提出一些观点。它可以完成这项工作，但是每当用户在添加一个设备后进入新设备时，它会再次添加旧设备，然后添加新设备，然后再次添加相同的东西。我只想显示用户最后一次添加到数组中的一个新项目。

谢谢

标签： javascriptarraysreactjstypescriptreact-typescript

解决方案

这是一些更动态的方法：

import React, { useState } from "react";
import { TextInput } from "./components/TextInput";

interface Device {
  deviceName: string;
  serialNumber: string | number;
}

const App: React.FC = () => {
  const [deviceName, setDeviceName] = useState("");
  const [serialNumber, setSerialNumber] = useState("");
  const [deviceInfos, setDeviceInfos] = useState<Device[]>([]);

  const handleDeviceChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setDeviceName(event.target.value);
  };
  const handleSerialChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSerialNumber(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    addDevice();
    setDeviceName("");
    setSerialNumber("");
  };

  const addDevice = () => {
    const newDevice: Device[] = [
      ...deviceInfos,
      { deviceName: deviceName, serialNumber: serialNumber }
    ];
    setDeviceInfos(newDevice);
  };
  return (
    <div
      className="App"
      style={{ textAlign: "center", margin: "0 auto", marginTop: "10em" }}
    >
      <form onSubmit={handleSubmit}>
        <TextInput
          type="text"
          placeholder="Add Device Name"
          handleChange={handleDeviceChange}
          value={deviceName}
        />
        <TextInput
          type="text"
          placeholder="Add fuck"
          handleChange={handleSerialChange}
          value={serialNumber}
        />
        <button type="submit">Add</button>
      </form>
      {deviceInfos.map((device, i) => (
        <div key={i}>
          <h3>{device.deviceName}</h3>
          <h3>{device.serialNumber}</h3>
        </div>
      ))}
    </div>
  );
};

export default App;

推荐阅读