Material-UI Autocomplete onChange не обновляет значение

Question

Я хочу использовать событие onChange для компонента автозаполнения, чтобы получить текущие выбранные значения. Проблема в том, что он не работает должным образом, поэтому, когда я нажимаю, чтобы проверить / снять флажок значения, флажок все еще не отмечен, но в консоли я вижу, что было добавлено новое значение

откомментируйте эту часть, чтобы она работала:

  value={myTempVal}
      onChange={(event, newValue) => {
        setMyTempVal(newValue);
        console.log(newValue);
      }}

онлайн-демонстрация: https://codesandbox.io/embed/hardcore-snowflake-7chnc?fontsize=14&hidenavigation=1&theme=dark

код:

const [myTempVal, setMyTempVal] = React.useState([]);

<Autocomplete
      open
      multiple
      value={myTempVal}
      onChange={(event, newValue) => {
        setMyTempVal(newValue);
        console.log(newValue);
      }}
      disableCloseOnSelect
      disablePortal
      renderTags={() => null}
      noOptionsText="No labels"
      renderOption={(option, { selected }) => {
        return (
          <>
            <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={selected}
            />
            {option.title}
          </>
        );
      }}
      options={option2}
      // groupBy={option => option.groupName}
      getOptionLabel={option => option.title}
      renderInput={params => (
        <div>
          <div>
            <SearchIcon />
          </div>
          <TextField
            variant="outlined"
            fullWidth
            ref={params.InputProps.ref}
            inputProps={params.inputProps}
          />
        </div>
      )}
    />

Answer 1

Вам нужно вывести donors receivers и options переменные из функции. Эти переменные воссоздаются при каждом рендеринге, это означает, что их ссылки меняются при каждом рендеринге, и когда Autocomplete выполняет проверку на равенство ссылок, чтобы решить, выбран ли параметр, он никогда не найдет выбранные параметры.

const donors = [...new Set(data.map(row => row.donor))].map(row => {
  return {
    groupName: "Donors",
    type: "donor",
    title: row || "null"
  };
});
const receivers = [...new Set(data.map(row => row.receiver))].map(row => {
  return {
    groupName: "Receivers",
    type: "receiver",
    title: row || "null"
  };
});
const option2 = [...donors, ...receivers];

export const App = props => {

  const [myTempVal, setMyTempVal] = React.useState([]);

  return (
    <Autocomplete
      open
      multiple
...

Вы также можете добавить getOptionSelected, чтобы перезаписать проверку ссылки:

<Autocomplete
      open
      multiple
      disableCloseOnSelect
      disablePortal
      renderTags={() => null}
      noOptionsText="No labels"
      getOptionSelected={(option, value) => option.title === value.title} 
      renderOption={(option, { selected }) => {
        return (
          <>
            <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={selected}
            />
            {option.title}
          </>
        );
      }}
      options={option2}
      // groupBy={option => option.groupName}
      getOptionLabel={option => option.title}
      renderInput={params => (
        <div>
          <div>
            <SearchIcon />
          </div>
          <TextField
            variant="outlined"
            fullWidth
            ref={params.InputProps.ref}
            inputProps={params.inputProps}
          />
        </div>
      )}
    />

Answer 2

Это может помочь: Заменить

checked={selected}

На

checked={myTempVal.filter(obj=>obj.title===option.title).length!==0}

Полное решение

import React from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
import CheckBoxIcon from "@material-ui/icons/CheckBox";
import Checkbox from "@material-ui/core/Checkbox";
import SearchIcon from "@material-ui/icons/Search";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

const data = [
  { donor: "Trader Joe's", receiver: "Person-to-Person" },
  { donor: "Trader Joe's", receiver: "Homes with Hope" },
  { donor: "Santa Maria", receiver: "Gillespie Center" },
  { donor: "Santa Maria", receiver: null }
];

export const App = props => {
  const donors = [...new Set(data.map(row => row.donor))].map(row => {
    return {
      groupName: "Donors",
      type: "donor",
      title: row || "null"
    };
  });
  const receivers = [...new Set(data.map(row => row.receiver))].map(row => {
    return {
      groupName: "Receivers",
      type: "receiver",
      title: row || "null"
    };
  });
  const option2 = [...donors, ...receivers];

  const [myTempVal, setMyTempVal] = React.useState([]);

  return (
    <Autocomplete
      open
      multiple
      value={myTempVal}

      disableCloseOnSelect
      disablePortal
      renderTags={() => null}
      noOptionsText="No labels"
      renderOption={(option, { selected }) => {
        return (
          <>
            <Checkbox
            onClick={
              ()=>{
                if(myTempVal.filter(obj=>obj.title===option.title).length!==0){
                  setMyTempVal([...myTempVal.filter(obj=>obj.title!==option.title)],console.log(myTempVal))
                }else{
                  setMyTempVal([...myTempVal.filter(obj=>obj.title!==option.title),option],console.log(myTempVal))
                }

              }
            }
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={myTempVal.filter(obj=>obj.title===option.title).length!==0}
            />
            {option.title}
          </>
        );
      }}
      options={option2}
      // groupBy={option => option.groupName}
      getOptionLabel={option => option.title}
      renderInput={params => (
        <div>
          <div>
            <SearchIcon />
          </div>
          <TextField
            variant="outlined"
            fullWidth
            ref={params.InputProps.ref}
            inputProps={params.inputProps}
          />
        </div>
      )}
    />
  );
};
export default App;