„So aktivieren Sie das onChange-Ereignis von MUI Autocomplete, um den Wert zu aktualisieren“

Question

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!

Answer 1

更新你的useEffect依赖数组。 https://legacy.reactjs.org/docs/hooks-effect.html []意味着只在挂载时调用

它在每次渲染时都会被调用

  useEffect(() => {
    const getPost = async () => {
      try {
        setCategories(postInfo[0].categories);
        setSelectedCategories(postInfo[0].categories);
      } catch (err) {}
    };
    getPost();
  }, []); //<--- 改变