Właśnie zacząłem z maszynopisami, więc proszę pamiętać. Próbuję zaimplementować prostego przesyłania plików w Reagation / TS. Ogólnie rzecz biorąc, nie sądzę, żebyś rozumieć, jak zainicjować obiekty, jak w Useestate i prawidłowo obsługiwać możliwości. Na przykład, należy wziąć pod uwagę ten kod, w którym używam funkcji, gdy użytkownik kliknie przycisk przesyłania i próbuję przeczytać plik z stanu i umieścić w formacie FormData, aby wysłać go do mojego punktu końcowego API):


const [fileSelected, setFileSelected] = React.useState<File>() // also tried <string | Blob>

const handleImageChange = function (e: React.ChangeEvent<HTMLInputElement>) {
    const fileList = e.target.files;

    if (!fileList) return;
    
    setFileSelected(fileList[0]);
  };

   const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    const formData = new FormData();
    formData.append("image", fileSelected, fileSelected.name);

     // line above ^ gives me the error below
  };
}

argument typu "| Blob |. nieokreślony "nie jest Przypisany do parametru typu "String | Kropelka'. Typ "Undefined" nie jest przypisany do typu "ciąg | Blob'.ts (2345)

Jak masz zainicjować obiekty w Usestate? A jeśli nie zainicjujesz, podobnie jak tutaj, musisz sprawdzić, że nie będziesz szczęśliwy, aby kompilator był szczęśliwy? Właśnie dodałem czek w UploadFile, aby sprawdzić, czy pliki jest null. Ale potem musiałem to zrobić ponownie, aby odnieść się do plikówEleted.name.

Więc dla obiektów, szczególnie coś w rodzaju tego typu pliku, jak powinieneś poradzić sobie z inicjowaniem? Ale także w ogóle, jak obsługiwać typy obiektów?

Nie ma to znaczenia, ale oto część znacznika:

        <Container className={classes.container}>
          <label htmlFor="photo">
            <input
              accept="image/*"
              style={{ display: "none" }}
              id="photo"
              name="photo"
              type="file"
              multiple={false}
              onChange={handleImageChange}
            />

            <Button
              className={classes.buttons}
              component="span"
              variant="contained"
              onClick={uploadFile}
            >
              Choose Picture
            </Button>
          </label>
        </Container>
0
MattoMK 22 październik 2020, 21:09

1 odpowiedź

Najlepsza odpowiedź

Po wywołaniu useState bez ustawiania wartości początkowej / domyślnej, typ będzie zawierać undefined oprócz oczekiwanego typu. Tutaj użyłeś generycznego <File>, aby powiedzieć useState jakiego rodzaju oczekiwania. Ale ponieważ zainicjowałeś go bez ustawiania wartości, typ fileSelected staje się File | undefined.

Jest to w porządku, ponieważ dokładnie reprezentuje rzeczywistość, której w stanie nie zawsze będzie File. Ale oznacza to, że musimy sprawdzić wartość fileSelected przed użyciem. Wystarczy dodać oświadczenie if i połączenie formData.append() nie będzie miał żadnych problemów w czasie wykonywania lub w kompilatorze maszynopisu. Interfejs File rozciąga się Blob, więc nie ma problemu przypisujące go do string | Blob po wykluczeniu możliwości undefined.

const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    if (fileSelected) {
        const formData = new FormData();
        formData.append("image", fileSelected, fileSelected.name);
    }
};

Link do placu zabaw

1
Linda Paiste 23 październik 2020, 02:51