如何在 React 中制作搜索过滤器

Question

嗨，我希望我的搜索栏过滤我在 react js 中的数据，但它显示了这一点： 错误：对象作为 React 子项无效（发现：对象带有键 {id、Nom、Email、Profession、Date_naiss、Telephone、Date_adhession}）。如果您打算渲染一组子项，请改用数组。 请有任何建议

这是我的代码

import React, { useState, useEffect, useRef } from "react";
import Axios from 'axios';
import './Parent.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Link } from "react-router-dom";

function Parent(){
    const [Info,getInfo] = useState([])
    const [search, setSearch] = useState("")
    const [searchResults, setSearchResults] = useState([])

    const inputEl = useRef("")
    useEffect(() => {
        getAllInfo();
      }, []);
  
  
      const getAllInfo = (props) =>{
         Axios.get('http://localhost:3005/adherents')
         .then((response) => {
        
           getInfo(response.data)
         })
         .catch(error => console.log("error"))
      }
      const searchHandler = (search) =>{
         setSearch(search);
         if (search !== "") {
             const newList = Info.filter((user,index) => {
               return Object.values(user).join("").toLowerCase().includes(search.toLowerCase()); 
             });
             setSearchResults(newList);
         }else{
             setSearchResults(Info)
             
         }
      }
      const getSearch = () =>{
          searchHandler(inputEl.current.value)
      }
    return(
        <div className="Info">
            <div className="PY">
             <h1>Rechercher les Adherents</h1>
             <div className="ui search">
                <div className="ui icon input">
                  <input ref={inputEl} text="text" 
                  placeholder="search" className="prompt" 
                  value={search} onChange={getSearch}></input>
                  <i className="search icon"></i>
                </div>
             </div>
    <table class="table">
    <thead class="thead-dark">
        <tr>
        <th scope="col">#</th>
        <th scope="col">Nom</th>
        <th scope="col">Email</th>
        <th scope="col">Numero_Tel</th>
        <th>Action</th>
        </tr>
    </thead>
    <tbody>
                
          { Info.map((user,index)=>
               <tr>
                   <th scope="row"> {index+1} </th>
                   <td> {user.Nom} </td>
                   <td> {user.Email} </td>
                   <td> {user.Telephone} </td>
                   <td>
                       <Link class="btn btn-primary btn-space" to={{pathname:"./SetInfo", user: user.Nom}} >View</Link>
                       <Link class="btn btn-outline-primary btn-space" to={{pathname:"./EditUser", user: user}} >Edit</Link>
                       <Link class="btn btn-danger btn-space">Delete</Link>
                   </td>
               
               </tr>
           ) 
          }
        
        
    </tbody>
        <div>
        { search.length < 1 ? Info  : searchResults}
        </div>


</table>
            </div>
        </div>
    )
}
export default Parent;

Answer 1

{ search.length < 1 ? Info : searchResults} 这行会导致错误。

const [Info,getInfo] = useState([]) 这里你将Info 声明为一个数组，它不能被渲染。如果你想展示一些东西，你应该在Info 中保留一个string。否则，您必须使用map 或类似的东西来迭代（就像您在您的表中所做的那样）Info 这样的数组 {Info.map(item) => <h4>{item.Email}</h4>}。 searchResults 也是如此，它也是一个数组。

像{search.length < 1 ? Info?.length : searchResult?.length} 这样修改代码可能是您的解决方案。

或者如果您想在表格中显示结果，请尝试这样的操作。 { ( search.length < 1 ? Info : searchResults).map(user, index) => ... 这样如果search.length大于1就会呈现搜索结果