setOpen] = React.useState(false);
                  
                  
                    const [options, setOptions] = React.useState([]);
                  
                  
                    const [value, setValue] = React.useState("");
                  
                  
                    const loading = open && options.length === 0;
                  
                  
                  
                  
                  
                    React.useEffect(() => {
                  
                  
                  
                  
                  
                      let active = true;
                  
                  
                  
                  
                  
                      if (!loading) {
                  
                  
                        return undefined;
                  
                  
                      }
                  
                  
                  
                  
                  
                      (async () => {
                  
                  
                  
                  
                  
                        const response = await axios.get(props.url)
                  
                  
                        const items = response.data;
                  
                  
                        if (active && items !== undefined) {
                  
                  
                          let list = [];
                  
                  
                          if (items !== null) {
                  
                  
                            for (let key in items) {
                  
                  
                  
                  
                  
                              list.push(items[key]);
                  
                  
                            }
                  
                  
                          }
                  
                  
                          return setOptions(list);
                  
                  
                        }
                  
                  
                      })();
                  
                  
                  
                  
                  
                      return () => {
                  
                  
                        active = false;
                  
                  
                      };
                  
                  
                    }, [loading]);
                  
                  
                  
                  
                  
                  
                  
                  
                    return (
                  
                  
                      <Autocomplete
                  
                  
                        multiple
                  
                  
                        size="small"
                  
                  
                        disableCloseOnSelect
                  
                  
                        onChange={(event, value) => {
                  
                  
                          props.setProductsList(value);
                  
                  
                        }}
                  
                  
                        options={options}
                  
                  
                        loading={loading}
                  
                  
                        fullWidth
                  
                  
                        onOpen={() => {
                  
                  
                          setOpen(true);
                  
                  
                        }}
                  
                  
                        onClose={() => {
                  
                  
                          setOpen(false);
                  
                  
                        }}
                  
                  
                        getOptionLabel={(option) => option.name}
                  
                  
                        renderOption={(option, { selected }) => (
                  
                  
                          <React.Fragment>
                  
                  
                            <Checkbox
                  
                  
                              icon={icon}
                  
                  
                              checkedIcon={checkedIcon}
                  
                  
                              style={{ marginRight: 5, padding: 0 }}
                  
                  
                              checked={selected}
                  
                  
                            />
                  
                  
                            {option.name}
                  
                  
                          </React.Fragment>
                  
                  
                        )}
                  
                  
                        renderInput={(params) => (
                  
                  
                          <React.Fragment>
                  
                  
                            <TextField
                  
                  
                              {...params}
                  
                  
                              variant="outlined"
                  
                  
                              label={props.label}
                  
                  
                              size="medium"
                  
                  
                              inputValue={value}
                  
                  
                              InputProps={{
                  
                  
                                ...params.InputProps,
                  
                  
                                endAdornment: (
                  
                  
                                  <React.Fragment>
                  
                  
                                    {loading ? <CircularProgress color="inherit" size={20} /> : null}
                  
                  
                                    {params.InputProps.endAdornment}
                  
                  
                                  </React.Fragment>
                  
                  
                                ),
                  
                  
                              }} />
                  
                  
                          </React.Fragment>
                  
                  
                        )}
                  
                  
                      />
                  
                  
                    );
                  
                  
                  }
                  
                  
                  
                  
                  
                  
                  
                  
                  Если вставляю value в inputValue то выдаёт ошибку - что это не строка
                  
                  
                
Люди, которые сидят с телефона будут тебя ненавидеть. Если большой участок кода, то лучше его куда-нибудь в gist отправлять.
Обсуждают сегодня