TypeError：nameFilter.map不是一个函数

Question

我正在将React应用用于Node js和Express Server的前端和后端。对于API，我正在使用REST API。我正在使用MongoDB作为数据库。我成功地将所有数据显示到浏览器。我为前端做了一个搜索选项。用户可以在其中按名称搜索学生。但是我做不到。我犯了一个我找不到的错误。我使用了React挂钩。

/* eslint-disable import/first */
import React, { useState, useEffect } from "react";
import { logEntry } from "../Api/Api";

function Datatable() {
  const [info, setinfo] = useState([]);
  const [total, settotal] = useState([]);
  const [searchItem, setsearchItem] = useState({
    item: ""
  });
  const [data, setdata] = useState([]);//THIS IS THE STATE WHERE I PASSED MY DATA
  const handleChange = e => {
    setsearchItem({ item: e.target.value });
  };

  const getEntries = async () => {
    const logEntries = await logEntry();
    console.log(logEntries);
    settotal(logEntries.count);
    setinfo(logEntries.students);
    setdata(logEntries.students);
  };


  const nameFilter = () => { //THIS IS WHERE I FILTER THE DATA AND PASS IT TO THE SEARCHITEM STATE
    data.filter.name.toLowerCase().includes(searchItem.item.toLowerCase());
  };



  useEffect(() => {
    getEntries();
  }, []);
  return (
    <div>
      <div style={{ paddingLeft: "800px" }}>
        <input
          placeholder="Search student"
          onChange={handleChange}
          style={{ width: "200px", height: "30px" }}
        />
      </div>
      <p>Total student: {total} </p>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>City</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
        </thead>

        <tbody>
          {info.map(list => {
            return (
              <tr>
                <td>{list.name}</td>
                <td>{list.city}</td>
                <td>{list.address}</td>
                <td>{list.phone}</td>
                <td>{list.email}</td>
              </tr>
            );
          })}
        </tbody>

        <tbody>
        {nameFilter.map(list => { //THIS IS WHERE I MAPPING THE DATA BUT I GOT ERROR.
            return (
              <tr>
                <td>{list.name}</td>
                <td>{list.city}</td>
                <td>{list.address}</td>
                <td>{list.phone}</td>
                <td>{list.email}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default Datatable;

This is data looks like

Answer 1

首先，在nameFilter函数中，您要检查数据是否为空。

const nameFilter = () => { //THIS IS WHERE I FILTER THE DATA AND PASS IT TO THE SEARCHITEM STATE
    const results = data.length > 0 && data.filter.name.toLowerCase().includes(searchItem.item.toLowerCase());
    return results.
};

因此，将负责设置数据。现在，在您nameFilter.map中，问题是nameFilter是一个函数。因此，您必须执行此操作

<tbody>
  {nameFilter().map(list => { //THIS IS WHERE I MAPPING THE DATA BUT I GOT ERROR.
  return (
    <tr>
      <td>{list.name}</td>
      <td>{list.city}</td>
      <td>{list.address}</td>
      <td>{list.phone}</td>
      <td>{list.email}</td>
    </tr>
  );
  })}
</tbody>