未能在react框架中搜索卡片

Question

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

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

这是因为当 search (这是搜索输入的状态)显示所有卡(也就是说，没有任何过滤器)时，但是如果搜索有字符串值，那么它会根据搜索E 210中的值来搜索或过滤数据。第一个操作做得很好，当没有搜索时，它显示了所有的卡片，问题是，当我以某种未知的原因编写搜索内容时，它没有向我显示任何数据和res，而不是以数组的形式获取数据，而是没有显示任何数据，只是一个空数组(感谢console.log())。

我也试着..。

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

console.log文件在运行时显示的内容，并在搜索输入中为搜索提供一个值。

第一个console.log(data)文件是显示搜索输入捕获的内容，然后显示一个console.log(res)文件，该文件显示来自API的数据，最后我们看到一个数组，该数组必须存储通过过滤选择的卡的数据，但显然是空。

数据的console.log

如果你能帮我找出这个问题的错误，我将不胜感激。我将留下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

cardsbird.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()))