搜索栏过滤显示结果，但不过滤 API 其余部分的结果

Question

我正在尝试获取数据抛出搜索栏，但问题是仅从显示结果中获取，它完全忽略了其余信息。我知道我正在做一个拼接，只显示前 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.

Answer 1

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

其余信息将被忽略，因为这一行将其丢弃：

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

characters.data.data.results 中的信息（获取的数据）在该函数结束时自然会超出范围。你应该把你的组件需要的任何东西都放入 state 中。

尝试将状态设置为：

// 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 设置为状态）仅激活一次（当组件最初安装时）。