无法在React框架中搜索卡片

Question

我正在使用react的网页中创建一个搜索引擎，然后使用searchcard.js文件，我尝试使用三元操作过滤数据，

const res = !search ? data : data.filter((dato) => dato.toString().toLowerCase().includes(search.toLocaleLowerCase()))

这是在 search （这是搜索输入的状态）这个void向我展示了所有 cards （即，没有任何过滤器），但是如果此搜索具有字符串值，然后它根据搜索的值搜索或过滤数据。第一个操作做得很好，当搜索没有任何内容时，它显示了所有卡片，问题是，当我为某些未知原因搜索时，它不会显示任何数据，而RES则不要将数据作为数组没有显示什么都没有显示，只有一个空数组（我认为这要归功于Console.log（））。

也尝试...

const res = !search ? data : data.filter((dato) => dato.name.toString().toLowerCase().includes(search.toLocaleLowerCase()))

我 给定搜索 搜索输入

第一个 console.log 文件是显示搜索输入捕获的内容，然后向我们展示一个 console.log（data）文件，向我们显示了来自 api ， console.log（res）的数据，最后我们看到了一个数组应该存储通过过滤选择的卡的数据，但显然是空的

console.log datas

如果您可以帮助我找到此问题的错误，我将不胜感激。我将留下 searchcard.js 代码， 如何获取数据和如何创建卡的代码。

searchcard.js

import React from 'react'
import { useState } from 'react'
import {Cards} from '../cards/Cards'
import { UseFetch } from '../UseFetch'

export const Searchcard = () => {
    //hooks
    const [url, setUrl] = useState("https://aves.ninjas.cl/api/birds") 
    const estado = UseFetch(url) /*Devuelve el objeto que tiene UseFetch (cargando, data) */
    const {cargando, data} = estado /*obtener los datos del objeto que entrego UseFetch */
    const [search, setSearch] = useState("")
    
    //Funcion que nos ayuda a capturar los valores dados por el usuario
    const searcher = (e) => {
        setSearch(e.target.value)
        console.log(e.target)
    }
    //Filtramos los datos
        const res = !search ? data : data.filter((dato) => dato.name.toString().toLowerCase().includes(search.toLocaleLowerCase()))
    
  return (
    <div>
        <input value={search} onChange={searcher} type="text" placeholder='¡Busca un pajaro!' className='form-control'></input>
    
    {
          cargando 
          ?
          <h1>Cargando...</h1>
           :
           <div>
            <Cards data={res} />    
            {console.log(data)}  
            {console.log(res)}
          </div>
  }
    
    </div>
  )
}

export default Searchcard

数据从公共API中获取。

为了提取数据，我使用

usefetch.js

import { useState, useEffect } from 'react'
export const UseFetch = (url) => {
  const [resultado, setResultado] = useState({ cargando: true, dato: null })
  useEffect( ()=>{
    getData(url)
  },[url])
  async function getData(url) {
    try{
      setResultado({cargando: true, data:null})
      const respues = await fetch(url)       
      const data = await respues.json()       
      setResultado({ cargando: false, data })
    }
    catch(e){
      console.log(e)
    }
  }
  return resultado
}

cards.js

import React, {useState} from 'react'
import {Cardsbird} from './Cardsbird'
import './Cards.css'
import Paginacion from '../Pagination/Pagination'



export const Cards = ({data}) => {
  const [actPag, setactPag] = useState(1)
  const [cardXpag] = useState(20)

  

  //
  const indUltimo = actPag * cardXpag;
  const indPrimero = indUltimo - cardXpag;
  const actCard = data.slice(indPrimero, indUltimo); 
  
  //Cambiar pagina
  const paginate = numPag => setactPag(numPag);

  return (
    <div className='container'>
      
        <ul className='cards'>
            {      actCard.map(p=>(
                  <li className='card-item' key={p.uid}>
                      <Cardsbird url={p._links.self}/>
                  </li>  
                ))
            }
            <div className='container2'><Paginacion cardXpag={cardXpag} totalCards={data.length} paginate={paginate}/></div>
        </ul>
    </div>
  )
}

export default Cards

cardbird.js

import React from 'react'
import { UseFetch } from '../UseFetch'
import Modal from './Modal'


export const Cardsbird = ({url}) => {
    const estado = UseFetch(url)
    const {cargando, data} = estado 



  return (
    <div>
        {
            cargando
            ?
            <h1>Cargando...</h1> :
            <div className='card' style={{width:'14rem'}} data-bs-toggle="modal" data-bs-target={`#id${data.sort}`}>
                <div className='card-header'>
                    <h5 className='card-title'>{data.name.spanish}</h5>
                </div>
                <div className='card-body'>
                    <img src={data.images.main} alt={data.uid} />
                </div>
                <Modal id={`id${data.sort}`} titulo={data.name.spanish} imagen={data.images.main} audio={data.audio.file} descripcion={data.iucn.description} habitat={data.habitat} tamaño={data.size} mapa={data.map.image} />           
            </div>
        }
    </div>
  )
}

export default Cardsbird

Answer 1

错误是我的愚蠢，因为我没有看到在API 内如何调用卡的名称。

是这样叫这个名字的

const res = !search ? data : data.filter((dato) => dato.toString().toLowerCase().includes(search.toLocaleLowerCase()))

，应该这样

const res = !search ? data : data.filter((dato) => dato.name.spanish.toString().toLowerCase().includes(search.toLocaleLowerCase()))