Javascript 如何在react for node数组中使用搜索筛选器

大家好，我在react中为通过节点服务器获得的阵列创建了搜索过滤器，但我遇到了以下错误： × 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)

import React，{useffect，useState}来自“React”
从“../SearchBox”导入SearchBox
从“../CharacterList”导入字符列表
const SearchDisney=（）=>{
常量[inputs，setInputs]=useState（“”）；
const[btn，setBtn]=使用状态（false）；
常量[apiResponse，setApiResponse]=useState（[]）；
常量[searchCharacter，setSearchCharacter]=useState（“”）；
useffect（（）=>{
callAPI（）；
如果（输入长度>2）{
setBtn（真）
}否则如果（btn）{
setBtn（假）
}
}，[输入，btn]）
常量callAPI=（）=>{
取回（“http://localhost:9000/disneyCharacter")
.then（res=>res.json（））
。然后（res=>setApiResponse（res））
}
常量handleInput=（e）=>{
setSearchCharacter（如目标值）
}
常量filteredCharacters=（）=>{
apiResponse.filter（（字符）=>{
返回字符.name.toLowerCase（）.includes（searchCharacter.toLowerCase（））
})
}
返回(
人事管理信息
)
}
导出默认的React.memo（SearchDisney）

以及角色列表：

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

从“React”导入React
从“../Character”导入字符
常量字符列表=（道具）=>{
常量字符=props.filteredCharacters.map（（字符，id）=>{
返回
})
返回(
{字符数}
)
}
导出默认字符列表

---

我可以在第一个文件中显示数组，但现在我想进行搜索筛选并得到此错误，有什么建议可以避免此错误吗？

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

在

SearchDisney

组件上，您不会从

filteredCharacters

函数返回任何内容。以下是修复方法：

const filteredCharacters=（）=>{
//我需要归还这个
返回apiResponse.filter（（字符）=>{
返回字符.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>

人事管理信息
//在此处调用函数：