除非触发 onChange 事件，否则选择框 (MUI) 中的默认值不会显示

Question

我正在从 API 获取数据以呈现选择框。选择框中的值包含用户详细信息。我的问题是，在初始加载时，即使正确获取数据，默认/初始用户也不会在选择框中呈现，即使数据在那里。

onchange 事件和选择框本身按预期工作。我添加了一个默认值。一个键来显示 DOM 它是一个新元素，但不确定还可以尝试什么

import { Avatar, Grid, MenuItem, SelectChangeEvent, Select } from "@mui/material";
import {iconMap} from './iconMap.ts'

const SocialSelectDropdown = () => {

    const [selectedAccount, setSelectedAccount] = useState<IConnectionData | null>(connectionData?.[0] ?? null)

    useEffect(() => {
        if (connectionData) {
            setSelectedAccount(connectionData?.[0])
        }
    }, [connectionData])

    const handleSelectedConnection = (e: SelectChangeEvent<string | unknown>) => {
        setSelectedAccount((prevState: IConnectionData | null) => {
            const selectedSocial = connectionData?.find((connection) => connection?.id === e?.target?.value);
            return selectedSocial || prevState;
        });
    };


    if (!selectedAccount?.id) {
        return <Loader />
    }

    return (
        <Grid item xs={12}>
            <Select
                key={selectedAccount?.id}
                size="small"
                sx={{ maxWidth: "fit-content" }}
                value={selectedAccount?.id}
                onChange={handleSelectedConnection}

            >
                {connectionData
                    ?.filter((item: any) => !["facebook_user"].includes(item?.platform))
                    ?.filter((item) => (role_id === 5 ? item : item?.platform !== "linkedin"))
                    ?.map((social: IConnectionData, index: number) => (
                        <MenuItem key={social?.id} selected={selectedAccount?.id === social?.id} value={social.id}>
                            <Grid container flexDirection="row" alignItems="center" gap={1}>
                                <Grid item position="relative">
                                    <Avatar src={social?.profile_pic_url} />
                                    <Grid item position="absolute" bottom={-5} right={-5}>
                                        <GetPlatformIcon platform_id={iconMap(social)} size={20} />
                                    </Grid>
                                </Grid>
                                <Typography>
                                    {social?.username}
                                </Typography>
                            </Grid>
                        </MenuItem>
                    ))}
            </Select>
        </Grid>
    );
};

export default SocialSelectDropdown

wn；

Answer 1

连接数据从哪里来？如果从父组件传递，则需要将其添加到 props 中