REACT-SELECT CustomDropdown 中的默认值不起作用

Question

我希望我的下拉菜单的默认值为 defaultValue={item.taste}（来自 match.json 的值）但它不起作用...（转到 /menu/Menu1 和豌豆汤）

import Select from "react-select";

export default function CustomDropdown({ style, options, defaultValue }) {
  return (
    <div style={style}>
      <Select options={options} defaultValue={defaultValue} />
    </div>
  );
}

菜单项显示：

export default function MenuItemDisplay() {

  const { menuId, itemId } = useParams();
  const { match } = JsonData;    
  const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
  const item = matchData.find((el) => el._id === itemId);

  const styles = {
    select: {
      width: "100%",
      maxWidth: 150
    }
  };
  const TASTE = [
    { label: "Good", value: "Good" },
    { label: "Medium", value: "Medium" },
    { label: "Bad", value: "Bad" }
  ];
...   

  return (
    <>
        <div className="TextStyle">
          {"Taste "}
          <CustomDropdown
            style={styles.select}
            options={TASTE}
            defaultValue={item.taste}
           //The default value is not working only if it's 
           //TASTE[0]
          />
        </div>
        ...
    </>
  );
}

此处 link 对应 code

Answer 1

作为默认值，您需要传递 TASTE 数组的对象之一。你可以这样做：

<CustomDropdown
  style={styles.select}
  options={TASTE}
  defaultValue={TASTE.find(t => t.label === item.taste)}
/>

REACT-SELECT CustomDropdown 中的默认值不起作用

REACT-SELECT defaultValue in CustomDropdown not working

javascript

reactjs

react-router

react-select

react-hooks