reactjs - 反应搜索框->调用地图功能时功能不起作用

Question

import React, { useState } from "react";
    import "./styles.css";
    import Heading from "../src/components/Heading";
    import Info from "./Info";
    import Card from "../src/components/Cards";
    
    function createCard(Info) {
      return <Card key={Info.id} name={Info.name} />;
    }
    
    function App() {
      const [search, setSearch] = useState("");
    
      const findperson = Info.filter( personName=> {
        return personName.name.toLowerCase().includes(search.toLowerCase);
      });
    
      return (
        <div>
         
          <Heading />
          <input
            type="text"
            placeholder="Search"
            onChange={event => setSearch(event.target.value)}
          />
          {findperson.map(createCard)}
        </div>
      );
    }
    export default App;

-----------------------------------------------------------------------------------------
Array info.js

const Info = [
     {
       id: 1,
       name: "Rahul"
     },
     {
       id: 2,
       name: "Rohan"
     },
     {
       id: 3,
       name: "rajesh"
     }
   ];
   
   export default Info;

我正在尝试制作一个从数组（信息）中获取数据然后过滤数据的搜索框，但是在调用 map 函数时，我的代码正在中断，我无法显示任何数据，

findPerson 的控制台日志

标签： reactjs

Answer 1

您不是在调用 toLowerCase，而是在传递函数本身。

  const findperson = Info.filter( personName=> {
    // return personName.name.toLowerCase().includes(search.toLowerCase);
    return personName.name.toLowerCase().includes(search.toLowerCase()); // <-- () missing
  });