如何使搜索过滤器对节点数组做出反应

Posted 2023-03-07

【中文标题】如何使搜索过滤器对节点数组做出反应

【英文标题】：How make work a search filter in react for node array

【发布时间】：2020-08-13 23:58:53

【问题描述】：

大家好，我为通过我的节点服务器获得的数组创建了一个搜索过滤器，但我收到了这个错误： × TypeError: props.filteredCharacters.map 不是 components/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

我可以在第一个文件中显示数组，但现在我想进行搜索过滤并收到此错误，有什么建议可以解决此错误吗？

【参考方案1】：

看起来你需要在这里解决两件事：

在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>