过滤器功能不起作用并出现错误

Question

我正在尝试使用搜索过滤器来搜索 table 的所有元素，但出现此错误 record.filter 不是函数，如果将其删除，则会出现此错误 record.map 不是函数。所以我不明白这个问题我找不到解决方案

import { useEffect, useState } from "react";
import axios from "axios";
import React from 'react';

function Read() {
  const [record, setRecord] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/comments')
    .then((response) =>{
      console.log(response.data);
      setRecord(response.data);
    })
  }, [])

  return (
    <>
        <input type="text" onChange={(e) => { setSearchTerm(e.target.value) }} placeholder="Search" />
        <table>
         <thead>
         <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
          </tr> 
          </thead>
          <tbody>   
              {record
              .filter((val) => {
                  if (searchTerm === "") {
                    return val;
                  }
                  else if (
                    val.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    val.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    val.body.toLowerCase().includes(searchTerm.toLowerCase())
                  ) {
                    return val;
                  }
                  return false;
              })
              .map((demo, i)=> {
                return(
                  <tr key={i}>
                  <td>{demo.name}</td>
                  <td>{demo.email}</td>
                  <td>{demo.body}</td>
                </tr>
                )
                })}
         </tbody>
       </table>
    </>
  );
}

export default Read;

Answer 1

我认为由于渲染问题，有时记录只是空值。您只需在 return.

上方添加 if (!record) return <></> 此代码

并且您最好将记录的初始值修改为 [] 而不是 ''

import { useEffect, useState } from "react";
import axios from "axios";
import React from 'react';

function Read() {
  const [record, setRecord] = useState([]); // ‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️ HERE!!
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/comments')
    .then((response) =>{
      console.log(response.data);
      setRecord(response.data);
    })
  }, [])

  if (!record) return <></> // ‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️ HERE!!

  return (
    <>
        <input type="text" onChange={(e) => { setSearchTerm(e.target.value) }} placeholder="Search" />
        <table>
         <thead>
         <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
          </tr> 
          </thead>
          <tbody>   
              {record
              .filter((val) => {
                  if (searchTerm === "") {
                    return val;
                  }
                  else if (
                    val.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    val.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    val.body.toLowerCase().includes(searchTerm.toLowerCase())
                  ) {
                    return val;
                  }
                  return false;
              })
              .map((demo, i)=> {
                return(
                  <tr key={i}>
                  <td>{demo.name}</td>
                  <td>{demo.email}</td>
                  <td>{demo.body}</td>
                </tr>
                )
                })}
         </tbody>
       </table>
    </>
  );
}

export default Read;

过滤器功能不起作用并出现错误

filter function is not working and giving errors

javascript

arrays

search

filter

reactjs