Как заставить работать поисковый фильтр в реакции на массив узлов

Question

Привет, ребята, я создаю поисковый фильтр для реагирования на массив, полученный через сервер узлов, но я получил эту ошибку: × Ошибка типа: props.filteredCharacters.map не является функцией в компонентах / CharacterList / index. js : 6

Здесь 2 файла:

import React, { useEffect, useState } from 'react'
import SearchBox from '../SearchBox'
import CharacterList from '../CharacterList'



const SearchDisney = () => {

  const [inputs, setInputs] = useState('');
  const [btn, setBtn] = useState(false);
  const [apiResponse, setApiResponse] = useState([]);
  const [searchCharacter, setSearchCharacter] = useState('');

  useEffect(() => {

    callAPI();

    if (inputs.length > 2) {
      setBtn(true)
    } else if (btn) {
      setBtn(false)
    }

  }, [inputs, btn])

  const callAPI = () => {
    fetch("http://localhost:9000/disneyCharacter")
      .then(res => res.json())
      .then(res => setApiResponse(res))
  }

  const handleInput = (e) => {
    setSearchCharacter(e.target.value)
  }

  const filteredCharacters = () => {
      apiResponse.filter((character) => {
       return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
    })
  }

  return (

    <div className="search-container">
      <h1>Personnage Infos</h1>
        <SearchBox handleInput={handleInput} />
        <CharacterList filteredCharacters={filteredCharacters} />
    </div>
  )
}


export default React.memo(SearchDisney)

И CharacterList:

import React from 'react'
import Character from '../Character'

const CharacterList =  (props) => {

  const characters = props.filteredCharacters.map((character, id) => {
    return <Character key={id} name={character.name} username={character.username} yearCreation={character.yearCreation}/>
  })

  return (
    <div>
        { characters }
    </div>
  )
}

export default CharacterList

Я могу отобразить массив в первом файле, но теперь я хочу сделать фильтр поиска и получил эту ошибку, любой совет, чтобы получить эту ошибку?

Answer 1

Похоже, здесь нужно исправить 2 вещи:

для компонента SearchDisney, вы ничего не возвращаете из функции filteredCharacters. Вот исправление:

  const filteredCharacters = () => {
     //need to return this 
     return apiResponse.filter((character) => {
       return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
    })
  }

Дополнительно, чтобы CharacterList мог получить реквизит filteredCharacters в виде массива - вы должны вызвать функцию filteredCharacters, которая возвращает этот массив, например, как это:

 <div className="search-container">
      <h1>Personnage Infos</h1>
        <SearchBox handleInput={handleInput} />
        //call the function here:
        <CharacterList filteredCharacters={filteredCharacters()} />
    </div>