無法在 React 中顯示新的過濾數組

Question

我正在嘗試顯示一個新的過濾數組，該數組隱藏元素的 rest 並僅保留我在搜索欄中鍵入的元素。 const newFilter在控制台中工作，但不會在返回中讀取。 我嘗試將 const 放在其他地方，但它超出了 scope ..

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>
  );
}