带有复选框的过滤器数组和输入反应答案

【问题标题】：Filter array with checkbox and input react带有复选框的过滤器数组和输入反应
【发布时间】：2020-08-16 08:52:14
【问题描述】：

大家好，我对从节点导出的数组有过滤功能，我想在过滤数组 1 中的对象之前放置 2 个条件，以检查字符的全域和名称。过滤器单独工作，但当我将两者结合时，只有 1 个工作。这是我的代码：

过滤函数：filteredCharacter。

const SearchDisney = () => {

  const [inputs, setInputs] = useState('');
  const [btn, setBtn] = useState(false);
  const [apiResponse, setApiResponse] = useState([]);
  const [searchCharacter, setSearchCharacter] = useState('');
  const [searchUnivers, setSearchUnivers] = useState('');
  const [checked, setChecked] = 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 handleCheck = (e) => {
    setSearchUnivers(e.target.value)
    setChecked(e.target.checked)
  }


  **const charactersFiltered = checked === false && searchCharacter.length <= 2 ?
    (
      apiResponse
    )
    :
    (
      apiResponse
      .filter((character) => {
        return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
      })
      .filter((character) => {
        return character.univers.toLowerCase().includes(searchUnivers.toLocaleLowerCase())
      })
    )**

  return (
    <Fragment>
      <div className="search-result">
        <h1>Personnage Infos</h1>
        <SearchBox handleInput={handleInput} handleCheck ={handleCheck}/>
        <CharacterList className="search-result-display" charactersFiltered={charactersFiltered} />
      </div>
    </Fragment>
  )
}


export default React.memo(SearchDisney)

这里是搜索组件：

<div>
  <input placeholder='Chercher votre personnage préféré' onChange={props.handleInput} type="text" />
  <form>
        <fieldset>
            <legend style={{color: 'white'}}>Chercher par univers</legend>
            <input
            type="checkbox"
            name="disney"
            value="disney"
            onClick= {props.handleCheck}
            />
            <label style={{color: 'white'}} htmlFor="univers">Disney</label>
            <input
            type="checkbox"
            name="starwars"
            value="starwars"
            onClick={props.handleCheck}
            />
            <label style={{color: 'white'}} htmlFor="univers">StarWars</label>
        </fieldset>
    </form>
</div>

然后列出组件：

const CharacterList =  (props) => {

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

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

我的问题是，当我使用复选框选择宇宙时，搜索会以 1 个字符自动启动，但我希望它仅在我输入 minimun 3 个字符时搜索，就像我选择星球大战宇宙一样，我必须输入 minimun “Luk " 在输入中搜索卢克天行者。但是当我在复选框中选择星球大战并在直接显示卢克中输入 L 时，我想要最小的卢克。希望你能理解我，有什么建议吗？谢谢！

【问题讨论】：

当我做 const charactersFiltered = searchCharacter.length

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

【解决方案1】：

我找到了解决方案，我像这样更改了我的功能过滤字符：

const charactersFiltered = checked === false ?
  (
    searchCharacter.length <= 2 ?
      (
        apiResponse
      )
      :
      (
        apiResponse
          .filter((character) => {
            return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
          })
      )
  )
  :
  (
    searchCharacter.length <= 2 ?
      (
        apiResponse
        .filter((character) => {
          return character.univers.toLowerCase().includes(searchUnivers.toLowerCase())
        })
      )
      :
      (
        apiResponse
          .filter((character) => {
            return character.name.toLowerCase().includes(searchCharacter.toLowerCase())
          })
          .filter((character) => {
            return character.univers.toLowerCase().includes(searchUnivers.toLowerCase())
          })
      )
  )

它有效！

【讨论】：