Javascript TypeError:name.toLowerCase不是函数-React

我正在创建一个图标列表，如。我试图创建一个动态搜索栏，从数据列表中搜索图标。图标列表正在显示；但是，当我点击搜索栏时，出现以下错误：TypeError:name.toLowerCase不是函数。 谢谢你的帮助

//父对象
从“/icon_data.json”导入Iconda；
从“/ResultContainer”导入ResultContainer；
const fetchiconda=（）=>Promise.resolve（（）=>iconda）；
导出类型ModalProps={
setModalVisible：（值：任意）=>void；
setProp：（值：any）=>void；
modalVisible:布尔|未定义；
};
export const ModalIcons=（{setModalVisible，modalVisible，setProp，}:Partial）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
fetchiconda（）。然后（（jsonData）=>setData（jsonData））；
}, []);
const[searchTerm，setSearchTerm]=React.useState（“”）；
const handleChange=事件=>{
setSearchTerm（event.target.value）；
};
const results=！searchTerm
？数据
：data.filter（名称=>
name.toLowerCase（）.includes（searchTerm.toLocaleLowerCase（））
);
返回(
{
setModalVisible&&setModalVisible（false）
}}
> 
);
};

//子对象
从“/ResultRow”导入ResultRow；
类型ResultContainerProps={
数据：[]，
setProp：（值：any）=>void；
}
常量结果容器=({
数据，
setProp，
}：部分）=>{
返回(
{data.map（{family，names}）=>{
返回；
})}
);
};
导出默认结果容器；

//icon\u data.json
[
{
“家庭”：“蚂蚁设计”，
“名称”：[“向前走”、“向后走”、“向前走”、“向前走”]
},
{
“家庭”：“Entypo”，
“名称”：[“500px”、“带圆圈的500px”、“添加到列表”、“添加用户”]
}
]

动态使用

状态

或

道具

时，可能未加载值。所以用这种方式：

name && name.toLowerCase && name.toLowerCase().includes(searchTerm.toLocaleLowerCase())

---

我觉得主要问题是数据问题？如果未定义怎么办？

在

filter

函数中访问

数据
数组元素的方式似乎有问题。我相信您正在尝试筛选
数据的
名称
<代码>名称
是字符串数组。在数组上不使用
toLowerCase（）
函数

另外，我猜
数据[#].names
包含小写字符串。
下面将避免错误

const results = !searchTerm
? data
: data.filter(name =>
    name => name.names.includes(searchTerm.toLocaleLowerCase())
);

name.toLowerCase（）.includes（searchTerm.tolocalLowercase（））
中的
name
不是字符串。能否为此添加一个字符串？请提供来自
fetchiconda（）
调用的示例响应