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

【问题标题】：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

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

【问题讨论】：

标签： javascript node.js json reactjs react-hooks

【解决方案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>

【讨论】：