英文:
Mui Autocomplete using Array instead of Json
问题
我正在尝试复制自动完成 MUI 示例 这里。但我不是使用 JSON 数据结构，而是只传递一个数组。
我正在尝试以下操作：
export default function SearchTutorialArray() {
const top100Films = [
'肖申克的救赎',
'教父',
'教父第二部',
'黑暗骑士',
'十二怒汉',
'辛德勒的名单',
'低俗小说',
'指环王：王者归来',
'好家伙坏家伙丑家伙'
];
const options = top100Films.map((option) => {
const firstLetter = option[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option}
sx={{width: 300}}
renderInput={(params) => <TextField {...params} label="带类别的搜索" />}
/>
);
}
我认为主要问题在于这一行 getOptionLabel={(option) => option}，它导致函数返回以下错误：
对象不适用作 React 子元素（发现: 具有键 {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, firstLetter} 的对象）。如果你打算呈现一组子元素，请改用数组。
当将此行更改为 getOptionLabel={(option) => option[0] 时，下拉菜单将正常工作，但只显示每部电影的第一个字母。
英文:
I am trying to replicate the autocomplete MUI example here. But instead of using a JSON data structure, I am just passing an Array.
I am trying the following:
export default function SearchTutorialArray() {
const top100Films = [
'The Shawshank Redemption',
'The Godfather',
'The Godfather: Part II',
'The Dark Knight',
'12 Angry Men',
"Schindler's List",
'Pulp Fiction',
'The Lord of the Rings: The Return of the King',
'The Good, the Bad and the Ugly'
];
const options = top100Films.map((option) => {
const firstLetter = option[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option}
sx={{width: 300}}
renderInput={(params) => <TextField {...params} label="With categories"/>}
/>
);}
I think the main issue is in the line getOptionLabel={(option) => option} which makes the function to return this error:
> Objects are not valid as a React child (found: object with keys {0, 1,
> 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
> 21, 22, 23, 24, 25, 26, firstLetter}). If you meant to render a
> collection of children, use an array instead.
When changing this line to getOptionLabel={(option) => option[0]} the dropdown is working correctly, but only showing the first letter for every film.
答案1
得分: 2
你可以使用以下方法：
const options = top100Films.map((option) => {
const firstLetter = option[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
// no spreading ... here
label: option,
};
});
稍后：
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
// read from label attribute
getOptionLabel={(option) => option.label}
sx={{width: 300}}
renderInput={(params) => <TextField {...params} label="With categories"/>}
/>
英文:
You can use the following appraoch:
const options = top100Films.map((option) => {
const firstLetter = option[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
// no spreading ... here
label: option,
};
});
later:
<Autocomplete
id="grouped-demo"
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
// read from label attribute
getOptionLabel={(option) => option.label}
sx={{width: 300}}
renderInput={(params) => <TextField {...params} label="With categories"/>}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论