亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Ich erhalte die Optionen für die automatische Vervollst?ndigung von der API, und sie funktioniert perfekt und zeigt auch die von der API zurückgegebene ausgew?hlte Option an. Das Problem, mit dem ich konfrontiert bin, ist jedoch, dass dies nicht der Fall ist, egal, ob ich versuche, einen Wert (eine Kategorie) zu entfernen oder hinzuzufügen. Es werden keine L?schungen oder Erg?nzungen vorgenommen.

Online-Demo-Codesandbox

PostInfo.jsx:

import SelectPostsCatsOptions from "../../components/autocomplete/SelectPostsCatsOptions";
import postInfo from "./postInfo.json";
export default function PostInfo() {
  const [categories, setCategories] = useState([]);
  const [selectedCategories, setSelectedCategories] = useState([]);

  useEffect(() => {
    const getPost = async () => {
      try {
        setCategories(postInfo[0].categories);
        setSelectedCategories(postInfo[0].categories);
      } catch (err) {}
    };
    getPost();
  });

  return (
   
    <div className="PostInfoPage">
      <>
        <div>
          <form>
            <div>
              <h3>帖子類別：</h3>
              <SelectPostsCatsOptions
                selectedCategories={selectedCategories}
                setSelectedCategories={setSelectedCategories}
                onChange={(event, newSelectedCategories) =>
                  setSelectedCategories(newSelectedCategories)
                }
                value={selectedCategories}
              />
              <p>已選擇的類別：</p>
            </div>
          </form> 
        </div>
      </>  
    </div>
  );
}

W?hlen Sie Beitr?geKatzenOptionen:

import categories from "./postsCategories.json";

export default function SelectPostsCatsOptions({
  selectedCategories,
  setSelectedCategories,
  onChange,
  value
}) {
  return (
    <div>
      <Autocomplete
        id="categories"
        disablePortal
        multiple
        getOptionLabel={(category) => category.catName}
        options={categories}
        disableGutters
        isOptionEqualToValue={(option, value) =>
          option.catName === value.catName
        }
        renderOption={(props, categories) => (
          <li {...props} key={categories.id}>
            {categories.catName}
          </li>
        )}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip
              key={option.id}
              label={option.catName}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField {...params} placeholder="類別" />
        )}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

Ich wei? nicht, was mir hier fehlt, warum ich bei der automatischen Vervollst?ndigung kein Tag hinzufügen oder daraus entfernen kann!