为什么我得到：TypeError：无法读取未定义的属性“toLowerCase”（React JS）答案

【问题标题】：Why did I get: TypeError: Cannot read property 'toLowerCase' of undefined (React JS)为什么我得到：TypeError：无法读取未定义的属性“toLowerCase”（React JS）
【发布时间】：2021-03-21 20:07:06
【问题描述】：

这里的新手，我正在尝试制作搜索过滤器，但我不确定为什么会收到此错误：

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>

【问题讨论】：

search 或val.name 中的至少一个是undefined。您需要调试哪一个并找出原因。
等等，你有Object.keys(mangas) filter((val) => { /* ... */})，这意味着val只能是一个字符串。你的意思是Object.values(mangas)？或者mangas[key].name.toLowerCase().includes(search.toLowerCase())？
Object.values 不起作用，因为我正在寻找键内的值，我之前也尝试过 mangas[key].name，它消除了错误，但结果是，排序功能不起作用。感谢您的尝试！
如果你只想要数组的值，那么mangas.filter()?我真的不确定这里应该发生什么。
我希望这是一个搜索过滤器，用户输入单词/字母，并过滤掉用户输入内容中未包含的任何内容。输入应从数组中获取“名称”属性以找到它。你也是对的，val.name 可能是问题所在，只是不知道如何解决它。我尝试过的东西是 mangas.keys.name、mangas[keys].name、mangas.name、val.keys.name 等

标签： javascript reactjs

【解决方案1】：

尝试使用

  Object.values(mangas).filter((val) => {

                                if (search === '') {
                                    return val;
                                } else if (                                    
    val?.name.toLowerCase().includes(search.toLowerCase())
                                ) {
                                    return val;
                                } else {
                                    return 'null';
                                }
});

【讨论】：

尝试使用 Object.values 而不是 Object.keys
找不到属性'name'
它将返回对象
即使你不需要同时使用 Object.keys 和 Object.values 。你可以简单地编写 mangas.filter 。
我有点困惑，你能解释一下吗