反应选择的默认值，当我想发布具有空白页面输出的数据时，复选框不起作用

我无法将获取的数据作为默认值放入下拉列表（反应选择）和复选框中？我有显示的下拉菜单（“好”，...），但默认值dishId:1 is Medium，所以我应该看到在我的下拉列表中已经选择了Medium，但事实并非如此（评论的问题相同）。

export default function MenuItemDisplay() {
...
    const [dish, setDish] = useState([])

    useEffect(() => {
        axios.post(url, { dishId })
            .then(res => {
                console.log(res)
                setDish(res.data.dishes [0])
            })
            .catch(err => {
                console.log(err)
            })
    }, [dishId]);

    const TASTE = [
        { label: "Good", value: "Good" },
        { label: "Medium", value: "Medium" },
        { label: "Bad", value: "Bad" }
    ];
    const COMMENT = [
        { label: "0", value: "0" },
        ...
    ];


function Checkbox({ value }) {
    const [checked, setChecked] = React.useState(true);

    return (
      <label>
        <input
          type="checkbox"
          defaultChecked={checked}
          onChange={() => setChecked(!checked)}
        />
        {value}
      </label>
    );
  }    

    return (
        <>
            <Dropdown
                style={styles.select}
                options={TASTE}
                defaultValue={TASTE.find((t) => t.label === dish.taste)}
                isMulti={true}
            />
           <Dropdown
                    style={styles.select}
                    options={COMMENT}
                    defaultValue={TASTE.find((t) => t.label === dish.comment)}
                    isMulti={true}
                />
           <Checkbox value={!!dish.trust} />

            {(dish.menu) !== "") ?
                <div>
                    Menu
                    <div >
                        {dish.menu}
                    </div>
                </div>
                : ""
            }
        </>
    );
}


export default function CustomDropdown({
    className,
    style,
    options,
    styleSelect,
    value,
    setValue,
    isMulti = false
}) {
    const styles = {
        select: {
            width: "100%",
            maxWidth: 200
        }
    };

    function changeSelect(option) {
        setValue(option.value);
    }

    return (
        <div style={style} onClick={(e) => e.preventDefault()}>
            {value && isMulti === false ? (
                <Tag
                    selected={value}
                    setSelected={setValue}
                    styleSelect={styleSelect}
                />
            ) : (
                <Select
                    className={className}
                    style={styles.select}
                    value={value}
                    onChange={changeSelect}
                    options={options}
                    isMulti={isMulti}
                />
            )}
        </div>
    );
}

export default function Tag({ selected, setSelected, styleSelect }) {
    const backgroundColor = styleSelect?.(selected?.label) ?? "grey";
    return (
        <div style={{
            display: "flex",
            justifyContent: "space-around",
            padding: "0.1em",
            backgroundColor: backgroundColor,
            borderRadius: "4px",
            color: "white",
            marginRight: "20px",
            marginLeft: "4px",
            marginBottom: "8px"
        }}>
            {selected}
            <button
                style={{...}}
                onClick={() => setSelected(null)}
            >x</button>
        </div>
    )
}

我真的不明白为什么它不起作用dish.taste返回给我“中”，dish.comment返回我 5，dish.trust给我 1。

我的下拉菜单和/或标签组件出了什么问题？

这里应该存在主要问题：

<Dropdown
  defaultValue={TASTE.find((t) => t.label === dish.taste)}
/>

使用此 defaultValue 属性，您只需在下拉列表呈现时设置该值一次。这菜品味道如果您通过异步请求检索其值，则此时无法定义。相反，您应该做的是添加一个 useEffect，仅在定义了ish.taste 值后才设置下拉列表的正确值。所以：

const [valueDropdown, setValueDropdown] = React.useState(null);

useEffect(() => { 
 // here you are running this useEffect each time the dish state changes
 if(dish?.taste){ //checks if taste exists
  setValueDropdown(TASTE.find((t) => t.label === dish.taste));
 }
}, [dish]);

现在，您应该传递两个新的 props，而不是传递给下拉列表 defaultValue：value和setValue:

<Dropdown
  value={valueDropdown}
  setValue={setValueDropdown}
/>

最后，随着 props 的更改，您还应该在 Dropdown 组件内更新它们并删除该组件内的状态定义：

export default function CustomDropdown({
  style,
  options,
  styleSelect,
  value : selected,
  setValue : setSelected
}) {
// remove the line const [selected, setSelected] = useState(defaultValue);
....other logic
}