搜索栏从显示中过滤结果，而不是从 API 的其余部分过滤结果

如何解决搜索栏从显示中过滤结果，而不是从 API 的其余部分过滤结果

我正在尝试获取数据抛出搜索栏，但问题是仅从显示结果中获取，它完全忽略了其余信息。我知道我正在做一个拼接来只显示前 8 个结果，但是一旦我开始在搜索栏上写，它只会在这 8 个之间进行过滤。我很确定我错过了一个步骤，但不要知道如何为此搜索解决方案。

我分享了我的一些代码：

import React from 'react';
import axios from 'axios';
import './navbar.css'
import Cardlist from '../body/CardList';


function SearchBar(){
 const [characters,setCharacters] = React.useState([]);
 const [search,setSearch] = React.useState('');
 const [loading,setLoading] = React.useState(true);
 const [error,setError] = React.useState(); 



 React.useEffect(()=>{
  const API_PUB = process.env.REACT_APP_API_PUB_KEY;
  const ts = 1;
  const hash = '(not display)';
  const URL_KEY = `https://gateway.marvel.com/v1/public/characters?ts=${ts}&apikey=${API_PUB}&hash=${hash}`;
  
 axios.get(URL_KEY)
  .then(characters=>
    {setCharacters(characters.data.data.results.slice(0,8));
  })
  .catch((err)=>
  {setError(err);})
  .finally(()=>
  {setLoading(false);});
},[])

const charactersArray = Object.values(characters)
console.log(charactersArray)
if (loading) {
  return <p>Loading...</p>;
}

if (error || !Array.isArray(charactersArray)) {
  return <p>There was an error loading your data!</p>;
}
const characterSearch = search

const filterCharacters = search.length === 0 ? charactersArray : 
 charactersArray.filter((character => character.name.toLowerCase().includes(search.toLowerCase())))
/*   handleChange = (e) =>{
  this.setState({searchField:e.target.value})
  } */
 
  return (
    <div className="containerGalery">
      <nav className="barra"> 
            <div className="logo"/>
            <div className="barraSeparadora">|</div> 
            <div className="lupa" alt="lupa"/> 
            <input className="buscador"  
        type="text"
        placeholder="buscar"
        value={characterSearch}
        onChange={(e) => setSearch(e.target.value)}
        />
        </nav>
        
    <span>
    <Cardlist charactersArray={filterCharacters} fallback={"Loading..."}/>
    </span>
    </div>
  );

}

export default SearchBar;```

I try to express myself as clear as possible,english is not my native language,sorry if something is not completely clear.

解决方法

问题是只从显示结果中获取，它完全忽略了其余信息。

其余信息被忽略，因为这一行把它扔掉了：

setCharacters(characters.data.data.results.slice(0,8));

characters.data.data.results 中的信息（获取的数据）在该函数结束时自然会超出范围。您应该将组件需要的任何内容都放入状态。

尝试将状态设置为：

// Keep all the characters in component state.
setCharacters(characters.data.data.results);

然后将 filterCharacters 更改为：

// If the user has typed something,show all matches (regardless of how many).
// Otherwise,show just the first 8.
const filterCharacters =
  search.length === 0
    ? charactersArray.slice(0,8)
    : charactersArray.filter(character => character.name.toLowerCase().includes(search.toLowerCase()));

区别（通过这些更改）在于您将 .slice(0,8) 移动到您渲染组件的位置（而不是您设置状态的位置）。这意味着您应该能够将所有字符保持在组件的状态中，但也只能向用户显示它们的选择。

---

旁注：您的组件只获取一次数据（而不是根据用户输入的内容重新获取）对我来说似乎很奇怪，但我不确定您的要求是什么。

目前，您的 useEffect 有一个空的依赖数组作为它的第二个参数。这意味着效果（获取并设置 characters 作为状态）仅激活一次（当组件最初安装时）。