如何将数组对象转换为适配MUI Autocomplete组件的格式

问题根源 #

你当前代码里setContactList({responseData})把接口返回的数组包装成了一个对象，导致contactList变成了{responseData: [你的联系人数组]}的嵌套结构，但MUI Autocomplete的options属性需要直接传入数组类型的数据。

修正数据存储逻辑 #

把setContactList({responseData})改成直接传入responseData，这样contactList就会存储接口返回的原始联系人数组，和控制台里的responseData结构一致。

修正后的完整请求代码：

const [contactList, setContactList] = useState([]);

useEffect(() => {
    fetch(CONTACTS_URL, {
        method: "GET",
        headers: {"Authorization": sessionStorage.getItem("accessToken")}
    })
    .then((response) => response.json())
    .then((responseData) => {
        // 直接存储数组，无需包装成对象
        setContactList(responseData);
    })
    .catch((error) => console.error(error));
}, [])

在Autocomplete中使用动态数据 #

现在contactList是正确的数组格式，直接传给Autocomplete的options属性，再通过getOptionLabel指定每个选项要显示的文本（比如你的contactName字段）：

<Autocomplete
    options={contactList}
    getOptionLabel={(option) => option.contactName}
    renderInput={(params) => <TextField {...params} label="选择联系人" />}
/>

如果需要更复杂的选项渲染（比如同时展示ID和名称），可以自定义renderOption：

<Autocomplete
    options={contactList}
    getOptionLabel={(option) => option.contactName}
    renderOption={(props, option) => (
        <Box component="li" {...props}>
            ID: {option.contactId} - {option.contactName}
        </Box>
    )}
    renderInput={(params) => <TextField {...params} label="选择联系人" />}
/>

这样就能让动态获取的数据正常适配MUI Autocomplete组件了。

内容的提问来源于stack exchange，提问作者JamieRhys