React搜索栏filter函数调用toLowerCase报undefined错误是什么原因？

核心问题出在筛选逻辑的属性访问错误：

• 你定义的searchTerm是绑定输入框内容的字符串类型状态，本身不存在first_name属性，代码中写的searchTerm.first_name取值为undefined，调用undefined.toLowerCase()就触发了对应的类型报错。
• 额外说明：Array.filter的回调函数需要返回布尔值，你原有逻辑中直接return val的写法也不符合规范，应该按需返回true/false控制是否保留当前项。

import React, { useState } from "react";
import "./App.css";
import JSONDATA from "./MOCK_DATA.json";
function App() {
  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search..."
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      {JSONDATA.filter((val) => {
        // 搜索词为空时全部保留，否则匹配first_name
        if (searchTerm === "") {
          return true;
        }
        return val.first_name.toLowerCase().includes(searchTerm.toLowerCase());
      }).map((val, key) => (
        <div className="user" key={key}>
          <p>{val.first_name}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

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