0
votes

Afficher les données suivantes en boucle sur un tableau en réaction dactylographié

Donc, j'essaie d'ajouter des données à deux tableaux différents dans react typescript

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

Je suis maintenant en train de faire une boucle sur le tableau ici et d'afficher le contenu

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

J'ajoute des données à ces tableaux en cliquant sur un bouton, puis en affichant modal, puis comme ceci

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

J'utilise le formulaire de hook de réaction. Donc, ce que je veux, c'est que chaque fois que je boucle sur les deux tableaux, chaque fois qu'il doit afficher le contenu qui vient d'être ajouté dans le tableau, le nouveau n'est pas le dernier qui a déjà été ajouté et affiché. J'espère pouvoir faire valoir un point ici. Il fait le travail, mais chaque fois que l'utilisateur entre un nouveau périphérique après en avoir ajouté un, il ajoute à nouveau l'ancien, puis le nouveau, puis encore et encore la même chose. je veux juste afficher un seul nouvel élément qui vient d'être ajouté à un tableau par l'utilisateur.

Merci

javascript reactjs typescript arrays react-typescript

0 commentaires

3 Réponses :

0
votes

En gros, j'ai répondu à ma propre question:

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;

0 commentaires

0
votes

Voici une autre approche dynamique:

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;

0 commentaires

0
votes

Une bien meilleure approche que j'ai utilisée dans la production

  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

0 commentaires