Problem z out-of-range w Select

Dzień dobry,
podczas pracy z moją aplikacją wyświetla mi się poniższe ostrzeżenie:
SelectInput.js:401 MUI: You have provided an out-of-range value 309 for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are "".

Gdzie zrobiłem tutaj błąd?

     const [pobierz_kontrahentow,setpobierz_kontrahentow] = React.useState([]);
     const [wybrany_kontrahent,setwybrany_kontrahent] = React.useState(-1);

 const  Baza_kontrahentow_Aktualizacja = () => {
       setpobierz_kontrahentow([]);
      fetch(sciezka_do_bazy+`/kontrahent_pobierz`)
      .then((res) => res.json())
      .then((json) => setpobierz_kontrahentow(json)) };

    useEffect(
        () => {
          Baza_kontrahentow_Aktualizacja()
        }, [props.wyswietl]);

.......

 <Dialog
          open={props.wyswietl}
          keepMounted
          aria-describedby="alert-dialog-slide-description"
          sx={{
            "& .MuiDialog-container": {
              "& .MuiPaper-root": {
                width: "100%",
                maxWidth: "350px", // Set your width here
              },
            },
          }}
        >
          <DialogTitle>USUWANIE KONTRAHENTA:</DialogTitle>

          <DialogContent>
            <FormControl sx={{ minWidth: 300 }}>
              <Select
               
                value={
                  wybrany_kontrahent === -1
                    ? ""
                    : wybrany_kontrahent
                }
                onChange={(e) => {
                  console.log(e.target.value);
                 setwybrany_kontrahent(e.target.value);
                }}
                >
                { pobierz_kontrahentow.map((pozycja) => (
                  <MenuItem key={pozycja.id} value={pozycja.id}>
                    {pozycja.dane}
                  </MenuItem>
                ))} 
              </Select>
            </FormControl>
          </DialogContent>
          <DialogActions>
            <span className="styl_1">
              <Button variant="contained" onClick={(e) => Przycisk_Usun()} >
                USUŃ
              </Button>{" "}
              <Button
                variant="contained"
                onClick={(e) => Przycisk_Anuluj()}
              >
                ANULUJ
              </Button>
            </span>
          </DialogActions>
        </Dialog>

Próbujesz się odwołać do elementu o indeksie 309, a takiego w tablicy nie ma. Z tego co widzę, to kluczem jest key={pozycja.id} value={pozycja.id}, czy ty przypadkiem nie robisz moj_array[pozycja.id]?

BTW
The available values are "". - to już samo z siebie mówi co jest nie tak. Pusta tablica?

Problem w tym że po wczytaniu danych do tablicy pobierz_kontrahentow indeks 309 istnieje

Tak samo jak wybiorę użytkownika to wyświetla mi się że indeks istnieje:

<Select
    value={
      wybrany_kontrahent === -1
        ? ""
        : wybrany_kontrahent
    }
    onChange={(e) => {
      console.log(e.target.value);
     setwybrany_kontrahent(e.target.value);
    }}
    >
    { pobierz_kontrahentow.map((pozycja) => (
      <MenuItem key={pozycja.id} value={pozycja.id}>
        {pozycja.dane}
      </MenuItem>
    ))} 
  </Select>

AdamWox napisał(a):

Próbujesz się odwołać do elementu o indeksie 309, a takiego w tablicy nie ma. Z tego co widzę, to kluczem jest key={pozycja.id} value={pozycja.id}, czy ty przypadkiem nie robisz moj_array[pozycja.id]?

BTW
The available values are "". - to już samo z siebie mówi co jest nie tak. Pusta tablica?

To nie jest index. Twoim indexem jest ta "fioletowa" jedynka obok. Chodzi o index elementu w tablicy, a nie identyfikator twojego obiektu. Skorzystaj z var index = findIndex() i wynik przypisz jako moj_array[index]

AdamWox napisał(a):

To nie jest index. Twoim indexem jest ta "fioletowa" jedynka obok. Chodzi o index elementu w tablicy, a nie identyfikator twojego obiektu. Skorzystaj z var index = findIndex() i wynik przypisz jako moj_array[index]

Jeśli chodzi o ten kod, który się odpala w map, to funkcja podana do map dostaje 3 argumenty: wartość, numer indeksu i tablicę
Czyli wystarczyłoby dodać argument:

pobierz_kontrahentow.map((pozycja, index) => (

SelectInput.js:401 MUI: You have provided an out-of-range value 309 for the select component.

Jak wywołujesz SelectInput?
Bo w tym kodzie nie widzę tego nigdzie.

Poza tym masz mylące nazewnictwo w kodzie:

 const [pobierz_kontrahentow,setpobierz_kontrahentow] = React.useState([]);

to nawet po polsku nie ma sensu. pobierz_kontrahentow to tryb rozkazujący, sugeruje, że to funkcja, która pobiera kontrahentów. A tymczasem jest to tablica kontrahentów. Czyli po polsku powinno się to nazywać

 const [kontrahenci,ustawKontrahentow] = React.useState([]);

tylko, że lepiej napisać to po angielsku:

 const [contractors, setContractors] = React.useState([]);

No i w JS zwykle się pisze camelCase a nie underscore_case. To jest subiektywne, ale po prostu większość programistów JSa tak pisze, więc po co iść pod prąd?

To jest cały kod komponentu:

export default function KomponentUsunKontrahenta(props)
{
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
     const [pobierz_kontrahentow,setpobierz_kontrahentow] = React.useState([]);
     const [wybrany_kontrahent,setwybrany_kontrahent] = React.useState(-1);
     const [kontrahent_nazwa,setkontrahent_nazwa] = React.useState([]);
     const [kontrahent_odswiez,setkontrahent_odswiez] = React.useState(false);

    const  Baza_kontrahentow_Aktualizacja = () => {
 
      //setpobierz_kontrahentow([]);
      fetch(sciezka_do_bazy+`/kontrahent_pobierz`)
      .then((res) => res.json())
      .then((json) => { setpobierz_kontrahentow(json);
      
      }) };

        useEffect(
        () => {
          Baza_kontrahentow_Aktualizacja()
        }, [props.wyswietl]);



    const Przycisk_Anuluj = () =>
    {
    setwybrany_kontrahent(-1);
    props.anuluj();
    }

    const Przycisk_Usun = () =>
    {

      console.log(wybrany_kontrahent);
      if (wybrany_kontrahent === -1)
      {
        enqueueSnackbar('Proszę wybrać kontrahenta.', { variant: "warning", autoHideDuration: 6000 });

        return;
      }

      props.anuluj();
      
      Swal.fire({
        title: 'Czy na pewno usunąć kontrahenta?',
        text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
        icon: 'warning',
        showCancelButton: true,
        cancelButtonText: 'Anuluj',
        confirmButtonColor: '#3085d6',
        cancelButtonColor: 'red',
        confirmButtonText: 'Tak, usuń',
      }).then((result) => {
        if (result.isConfirmed) {
//      
          let id = wybrany_kontrahent;
          fetch(sciezka_do_bazy+"/kontrahent_usun", {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ id }),
          }) 
            .then((response) => {
              return response.text();
            })
            .then((data) => {
              if (data === "wykonano") {
                enqueueSnackbar('Kontrahent został usunięty.', { variant: "success", autoHideDuration: 6000 });
              }})
            .catch((error) => {
              enqueueSnackbar('Błąd podczas usuwania kontrahenta.', { variant: "error", autoHideDuration: 6000 });
            });
           // props.pokaz();
          }
  
        if (result.isDismissed) {
        props.pokaz();
        }})
    }
    
    return (
        <>
        <Dialog
          open={props.wyswietl}
          keepMounted
          aria-describedby="alert-dialog-slide-description"
          sx={{
            "& .MuiDialog-container": {
              "& .MuiPaper-root": {
                width: "100%",
                maxWidth: "350px", // Set your width here
              },
            },
          }}
        >
          <DialogTitle>USUWANIE KONTRAHENTA:</DialogTitle>

          <DialogContent>
            <FormControl sx={{ minWidth: 300 }}>
              <Select
               
                value={
                  wybrany_kontrahent === -1
                    ? ""
                    : wybrany_kontrahent
                }
                onChange={(e) => {
                     setwybrany_kontrahent(e.target.value);
                }}
                >
                { pobierz_kontrahentow.map((pozycja) => (
                  <MenuItem  key={pozycja.id} value={pozycja.id} id={pozycja.id}>  {pozycja.dane}
                  </MenuItem>
                 
                ))} 
              </Select>
            </FormControl>
          </DialogContent>
          <DialogActions>
            <span className="styl_1">
              <Button variant="contained" onClick={(e) => Przycisk_Usun()} >
                USUŃ
              </Button>{" "}
              <Button
                variant="contained"
                onClick={(e) => Przycisk_Anuluj()}
              >
                ANULUJ
              </Button>
            </span>
          </DialogActions>
        </Dialog>
        </>
    
    );
}

Sam komponent uruchamiany jest w następujący sposób:

<komponentusunkontrahenta wyswietl="{otworz_komponent_usun_kontrahenta}" anuluj="{Przycisk_komponent_usun_kontrahenta_ukryj}" pokaz="{Przycisk_komponent_usun_kontrahenta}" />

Powyższy problem występuje gdy ukrywam komponent KomponentUsunKontrahenta, a następnie ponownie zostaje wyświetlony, ponieważ podczas zmiany wartości wyswietl aktualizowana jest baza kontrahentów:

  useEffect(
        () => {
          Baza_kontrahentow_Aktualizacja()
        }, [props.wyswietl]);

LukeJL napisał(a):

AdamWox napisał(a):

To nie jest index. Twoim indexem jest ta "fioletowa" jedynka obok. Chodzi o index elementu w tablicy, a nie identyfikator twojego obiektu. Skorzystaj z var index = findIndex() i wynik przypisz jako moj_array[index]

Jeśli chodzi o ten kod, który się odpala w map, to funkcja podana do map dostaje 3 argumenty: wartość, numer indeksu i tablicę
Czyli wystarczyłoby dodać argument:

pobierz_kontrahentow.map((pozycja, index) => (

SelectInput.js:401 MUI: You have provided an out-of-range value 309 for the select component.

Jak wywołujesz SelectInput?
Bo w tym kodzie nie widzę tego nigdzie.

Poza tym masz mylące nazewnictwo w kodzie:

 const [pobierz_kontrahentow,setpobierz_kontrahentow] = React.useState([]);

to nawet po polsku nie ma sensu. pobierz_kontrahentow to tryb rozkazujący, sugeruje, że to funkcja, która pobiera kontrahentów. A tymczasem jest to tablica kontrahentów. Czyli po polsku powinno się to nazywać

 const [kontrahenci,ustawKontrahentow] = React.useState([]);

tylko, że lepiej napisać to po angielsku:

 const [contractors, setContractors] = React.useState([]);

No i w JS zwykle się pisze camelCase a nie underscore_case. To jest subiektywne, ale po prostu większość programistów JSa tak pisze, więc po co iść pod prąd?

Ok problem rozwiązany okazało się że po usunięciu użytkownika w wybrany_kontrahent była przechowywana wartość id użytkownika która już nie istniała. Dodałem opcję która po usunięciu lub anulowaniu ustawia wartość -1.

virusek391 napisał(a):

To jest cały kod komponentu:

export default function KomponentUsunKontrahenta(props)
{
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
     const [pobierz_kontrahentow,setpobierz_kontrahentow] = React.useState([]);
     const [wybrany_kontrahent,setwybrany_kontrahent] = React.useState(-1);
     const [kontrahent_nazwa,setkontrahent_nazwa] = React.useState([]);
     const [kontrahent_odswiez,setkontrahent_odswiez] = React.useState(false);

    const  Baza_kontrahentow_Aktualizacja = () => {
 
      //setpobierz_kontrahentow([]);
      fetch(sciezka_do_bazy+`/kontrahent_pobierz`)
      .then((res) => res.json())
      .then((json) => { setpobierz_kontrahentow(json);
      
      }) };

        useEffect(
        () => {
          Baza_kontrahentow_Aktualizacja()
        }, [props.wyswietl]);



    const Przycisk_Anuluj = () =>
    {
    setwybrany_kontrahent(-1);
    props.anuluj();
    }

    const Przycisk_Usun = () =>
    {

      console.log(wybrany_kontrahent);
      if (wybrany_kontrahent === -1)
      {
        enqueueSnackbar('Proszę wybrać kontrahenta.', { variant: "warning", autoHideDuration: 6000 });

        return;
      }

      props.anuluj();
      
      Swal.fire({
        title: 'Czy na pewno usunąć kontrahenta?',
        text: "Polecenie to jest nieodwracalne, proszę o przemyślany wybór.",
        icon: 'warning',
        showCancelButton: true,
        cancelButtonText: 'Anuluj',
        confirmButtonColor: '#3085d6',
        cancelButtonColor: 'red',
        confirmButtonText: 'Tak, usuń',
      }).then((result) => {
        if (result.isConfirmed) {
//      
          let id = wybrany_kontrahent;
          fetch(sciezka_do_bazy+"/kontrahent_usun", {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ id }),
          }) 
            .then((response) => {
              return response.text();
            })
            .then((data) => {
              if (data === "wykonano") {
                enqueueSnackbar('Kontrahent został usunięty.', { variant: "success", autoHideDuration: 6000 });
              }})
            .catch((error) => {
              enqueueSnackbar('Błąd podczas usuwania kontrahenta.', { variant: "error", autoHideDuration: 6000 });
            });
           // props.pokaz();
          }
  
        if (result.isDismissed) {
        props.pokaz();
        }})
    }
    
    return (
        <>
        <Dialog
          open={props.wyswietl}
          keepMounted
          aria-describedby="alert-dialog-slide-description"
          sx={{
            "& .MuiDialog-container": {
              "& .MuiPaper-root": {
                width: "100%",
                maxWidth: "350px", // Set your width here
              },
            },
          }}
        >
          <DialogTitle>USUWANIE KONTRAHENTA:</DialogTitle>

          <DialogContent>
            <FormControl sx={{ minWidth: 300 }}>
              <Select
               
                value={
                  wybrany_kontrahent === -1
                    ? ""
                    : wybrany_kontrahent
                }
                onChange={(e) => {
                     setwybrany_kontrahent(e.target.value);
                }}
                >
                { pobierz_kontrahentow.map((pozycja) => (
                  <MenuItem  key={pozycja.id} value={pozycja.id} id={pozycja.id}>  {pozycja.dane}
                  </MenuItem>
                 
                ))} 
              </Select>
            </FormControl>
          </DialogContent>
          <DialogActions>
            <span className="styl_1">
              <Button variant="contained" onClick={(e) => Przycisk_Usun()} >
                USUŃ
              </Button>{" "}
              <Button
                variant="contained"
                onClick={(e) => Przycisk_Anuluj()}
              >
                ANULUJ
              </Button>
            </span>
          </DialogActions>
        </Dialog>
        </>
    
    );
}

Sam komponent uruchamiany jest w następujący sposób:

<komponentusunkontrahenta wyswietl="{otworz_komponent_usun_kontrahenta}" anuluj="{Przycisk_komponent_usun_kontrahenta_ukryj}" pokaz="{Przycisk_komponent_usun_kontrahenta}" />

Powyższy problem występuje gdy ukrywam komponent KomponentUsunKontrahenta, a następnie ponownie zostaje wyświetlony, ponieważ podczas zmiany wartości wyswietl aktualizowana jest baza kontrahentów:

  useEffect(
        () => {
          Baza_kontrahentow_Aktualizacja()
        }, [props.wyswietl]);

LukeJL napisał(a):

AdamWox napisał(a):

To nie jest index. Twoim indexem jest ta "fioletowa" jedynka obok. Chodzi o index elementu w tablicy, a nie identyfikator twojego obiektu. Skorzystaj z var index = findIndex() i wynik przypisz jako moj_array[index]

Jeśli chodzi o ten kod, który się odpala w map, to funkcja podana do map dostaje 3 argumenty: wartość, numer indeksu i tablicę
Czyli wystarczyłoby dodać argument:

pobierz_kontrahentow.map((pozycja, index) => (

SelectInput.js:401 MUI: You have provided an out-of-range value 309 for the select component.

Jak wywołujesz SelectInput?
Bo w tym kodzie nie widzę tego nigdzie.

Poza tym masz mylące nazewnictwo w kodzie:

 const [pobierz_kontrahentow,setpobierz_kontrahentow] = React.useState([]);

to nawet po polsku nie ma sensu. pobierz_kontrahentow to tryb rozkazujący, sugeruje, że to funkcja, która pobiera kontrahentów. A tymczasem jest to tablica kontrahentów. Czyli po polsku powinno się to nazywać

 const [kontrahenci,ustawKontrahentow] = React.useState([]);

tylko, że lepiej napisać to po angielsku:

 const [contractors, setContractors] = React.useState([]);

No i w JS zwykle się pisze camelCase a nie underscore_case. To jest subiektywne, ale po prostu większość programistów JSa tak pisze, więc po co iść pod prąd?