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

【问题标题】：Can't display a new filtered array in React无法在 React 中显示新的过滤数组
【发布时间】：2022-01-22 20:14:29
【问题描述】：

我正在尝试显示一个新的过滤数组，该数组隐藏了其余元素，只留下我在搜索栏中键入的元素。 const 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;

【问题讨论】：

我在模板中看不到任何filteredData 的使用。您没有在模板内打印结果。
你是对的。我坚持让 newFilter 在随机 div 中打印，但现在它已经磨损了。谢谢

标签： javascript arrays reactjs react-hooks constants

【解决方案1】：

在给定的sn-p中，return内部没有过滤数据显示逻辑

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

【讨论】：