为什么我得到：类型错误：无法读取未定义的属性"到小写"(React JS)

Question

这里的新手，我正在尝试制作一个搜索过滤器，我不确定为什么会出现这个错误：

TypeError:无法读取未定义的属性"toLowerCase">

这个问题看起来像是用toLowerCase输入的数据类型，但我不知道如何解决它

我已经尝试了下面答案中的所有内容

let mangas = [
{
id: '4',
name: 'Some Manga',
author: 'Some Name',
artist: 'Some Name',
chapters: 'Some Number',
}, 

function Search() {
const [search, setSearch] = useState('');
return (
<div>
<Navbar1 />
<NavbarExplore />
<section className="bg-light" style={{ minHeight: 700 }}>
<div className="container">
<div className="column pb-5 mb-5" style={{ minHeight: 800 }}>
<h1
className="top-header pt-5 mb-5"
style={{ borderBottom: '1px black solid', width: 400 }}
>
Full List
</h1>{' '}
<div className="nav-item px-2 mr-4 mb-4">
<form className="form-inline" action="/action_page.php">
<input
type="search"
placeholder="Search.."
className="mr-sm-2 pl-3 my-2 ml-3 search3"
onChange={(e) => {
setSearch(e.target.value);
}}
/>
</form>
</div>
<div className="row" style={{ listStyleType: 'none' }}>
{Object.keys(mangas)
.filter((val) => {
if (search === '') {
return val;
} else if (
val.name.toLowerCase().includes(search.toLowerCase())
) {
return val;
} else {
return 'null';
}
})
.map((key) => (
<li key={key}>
<div className="card m-2 mb-3 p-2 listbox">
<div className="column">
<div className="col-sm mb-2" style={{ color: 'black' }}>
<h3>{mangas[key].name}</h3>

Answer 1

尝试使用

Object.values(mangas).filter((val) => {
if (search === '') {
return val;
} else if (                                    
val?.name.toLowerCase().includes(search.toLowerCase())
) {
return val;
} else {
return 'null';
}
});