无法在 React 中显示新的过滤数组

Question

我正在尝试显示一个新的、经过过滤的数组，该数组隐藏其余元素，只保留我在搜索栏中键入的元素。常量newFilter在控制台中工作，但在返回中不读取。我试着把const放在其他地方，但它超出了范围。。

import React, { useState } from "react";

function SearchBar({ placeholder }) {
const [filteredData, setFilteredData] = useState([]);
const [wordEntered, setWordEntered] = useState("");
const [pokemonData, setPokemonData] = React.useState({});
React.useEffect(() => {
fetch(
"https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
)
.then((res) => res.json())
.then((data) => setPokemonData(data.pokemon));
}, []);
const allPokes = pokemonData;
const pokemons = Object.values(allPokes);
const handleFilter = (event) => {
const searchWord = event.target.value;
setWordEntered(searchWord);
const newFilter = pokemons.filter((value) => {
return value.name.toLowerCase().includes(searchWord.toLowerCase());
});
if (searchWord === "") {
setFilteredData([]);
} else {
setFilteredData(newFilter);
}
console.log(newFilter);
};
let checkConsole = () =>  alert("Check the console :)");
return (
<div className="search-div">
<p className="search-text">Name or Number</p>
<div className="search">
<div className="searchInputs">
<input
type="text"
placeholder={placeholder}
value={wordEntered}
onChange={handleFilter}
/>

</div>
</div>
</div>
);
}
export default SearchBar;

Answer 1

在给定的代码段中，返回的中没有经过过滤的数据显示逻辑

import React, { useState } from "react";
export default function SearchBar({ placeholder }) {
const [filteredData, setFilteredData] = useState([]);
const [wordEntered, setWordEntered] = useState("");
const [pokemonData, setPokemonData] = React.useState({});
React.useEffect(() => {
fetch(
"https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
)
.then((res) => res.json())
.then((data) => setPokemonData(data.pokemon));
}, []);
React.useEffect(() => {
console.log(filteredData);
});
const allPokes = pokemonData;
const pokemons = Object.values(allPokes);
const handleFilter = (event) => {
const searchWord = event.target.value;
setWordEntered(searchWord);
const newFilter = pokemons.filter((value) => {
return value.name.toLowerCase().includes(searchWord.toLowerCase());
});
if (searchWord === "") {
setFilteredData([]);
} else {
setFilteredData(newFilter);
}
console.log(newFilter);
};
let checkConsole = () => alert("Check the console :)");
return (
<div className="search-div">
<p className="search-text">Name or Number</p>
<div className="search">
<div className="searchInputs">
<input
type="text"
placeholder={placeholder}
value={wordEntered}
onChange={handleFilter}
/>
</div>
/* Add filteredData logic in the return */
{filteredData.map((each) => (
<p>{each.name}</p>
))}
</div>
</div>
);
}