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

"Bagaimana untuk mendayakan acara onChange MUI Autocomplete untuk mengemas kini nilai"
P粉649990273
P粉649990273 2023-09-15 17:21:34
0
1
1118

Saya mendapat pilihan autolengkap daripada API dan ia memperolehnya dengan sempurna dan juga menunjukkan pilihan yang dipilih dikembalikan daripada API tetapi masalah yang saya hadapi ialah tidak kira saya cuba mengalih keluar atau menambah nilai (kategori) ia tidak t Tiada pemadaman atau penambahan akan dibuat.

Kod Kod Demo Dalam Talian

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>
  );
}

Pilih PostsCatsOptions:

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>
  );
}

Saya tidak tahu apa yang saya hilang di sini, mengapa saya tidak boleh menambah atau mengalih keluar teg daripada autolengkap!

P粉649990273
P粉649990273

membalas semua(1)
P粉512526720

Kemas kini tatasusunan useEffectkebergantungan anda. https://legacy.reactjs.org/docs/hooks-effect.html []bermaksud hanya dipanggil apabila dipasang

Ia akan dipanggil pada setiap render

  useEffect(() => {
    const getPost = async () => {
      try {
        setCategories(postInfo[0].categories);
        setSelectedCategories(postInfo[0].categories);
      } catch (err) {}
    };
    getPost();
  }, []); //<--- 改變
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan