Показать следующие данные во время цикла по массиву в машинописной реакции

Question

Итак, я пытаюсь добавить некоторые данные в два разных массива в машинописном наборе

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])
  }

Я использую форму реагирования. Так что я хочу, чтобы каждый раз, когда il oop поверх обоих массивов, каждый раз он отображал содержимое, которое было только что добавлено в массив, новое, а не последнее, которое уже было добавлено и отображено. Я надеюсь, что смогу здесь кое-что сказать. Он выполняет свою работу, но всякий раз, когда пользователь входит в новое устройство после добавления одного, он снова добавляет старое, затем новое, затем снова, а затем снова то же самое. я просто хочу отобразить только один новый элемент, который был добавлен пользователем в массив в последний раз.

Спасибо

Answer 1

Вот еще немного Dynami c Подход:

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;

Answer 2

Намного лучший подход, который я использовал в производстве

  const ProfileDevices: React.FC<Props> = ({ onSubmit }) => {
      const [addDevice, setAddDevice] = useState(false)
      const [deviceInfos, setDeviceInfos] = useState<Device[]>([])

      const { register, handleSubmit, errors, clearError } = useForm({
        mode: 'onSubmit',
      })
      const addDevices: any = () => {
        setAddDevice(true)
      }

      onSubmit = (values: any) => {
        clearError()
        setAddDevice(false)
        const newDevice: Device[] = [
          ...deviceInfos,
          { deviceName: values.deviceName, serialNumber: values.serialNumber },
        ]
        setDeviceInfos(newDevice)
      }

      return (
        <ProfileContentContainer>
          <ProfileHeader>
            <ProfileTitle>Devices</ProfileTitle>

            <ProfileActions>
              <Button
                type="button"
                bgType="fill"
                size="default"
                label="Add Device"
                onClick={addDevices}
              />
            </ProfileActions>
          </ProfileHeader>
          {console.log(deviceInfos)}
          <DeviceList>
            <CardDevice deviceName="Device Name" serialNumber="QR10001123456788" />
            <CardDevice deviceName="Device Name" serialNumber="QR10001123456789" />
            {deviceInfos.map((device, i) => (
              <CardDevice
                key={i}
                deviceName={device.deviceName}
                serialNumber={device.serialNumber}
              />
            ))}
          </DeviceList>
          <Modal isActive={addDevice} toggleModal={() => setAddDevice(false)}>
            <ModalContent>
              <ModalHeader title="Add Device" />
              <AuthForm
                onSubmit={handleSubmit(onSubmit)}
                className="modalAddDeviceForm"
              >
                <InputText
                  placeholder="DeviceName"
                  name="deviceName"
                  type="text"
                  register={register({ required: true, maxLength: 10 })}
                  hasError={errors.deviceName}
                  errorMessage={
                    errors.serialNumber ? errors.serialNumber.message : undefined
                  }
                />
                <InputText
                  placeholder="Serial Number"
                  name="serialNumber"
                  type="text"
                  register={register({ required: true, maxLength: 10 })}
                  hasError={errors.serialNumber}
                  errorMessage={
                    errors.serialNumber ? errors.serialNumber.message : undefined
                  }
                />
                <Button type="submit" bgType="fill" size="default" label="Add" />
              </AuthForm>
              <ModalActions></ModalActions>
            </ModalContent>
          </Modal>
        </ProfileContentContainer>
      )
    }

    export default ProfileDevices

Answer 3

В основном я ответил на свой вопрос:

import React, { useState } from "react";

function App() {
  const [addCardData, setAddCardData] = useState("");
  const [addCards, setAddCards] = useState<Array<string>>([]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setAddCardData(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    setAddCards(prevState => [...prevState, addCardData]);
  };
  return (
    <div
      className="App"
      style={{ textAlign: "center", margin: "0 auto", marginTop: "10em" }}
    >
      <form onSubmit={handleSubmit}>
        <input type="text" onChange={handleChange} placeholder="Add any text" />
        <button type="submit">Add</button>
      </form>
      {addCards.map(addCard => (
        <h3>{addCard}</h3>
      ))}
    </div>
  );
}

export default App;