Question

大家好，我对从节点导出的数组具有过滤功能，我想在过滤数组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>

我的问题是，当我使用复选框选择Universe时，搜索会自动以1个字符启动，但是仅当我在输入中输入minimun 3个字符（如选择starwars Universe且必须键入minimun“ Luk）时，我才希望它进行搜索在输入中搜索卢克·天行者。但是目前，当我在复选框中选择“星球大战”并在直接显示luke的情况下键入L时，我希望具有最低的Luk。希望您理解我，有什么建议吗？谢谢！

Answer 1

我找到了解决方案，我改变了我的功能filterCharacter，像这样：

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())
          })
      )
  )

它有效！

使用复选框过滤数组并输入反应

1 个答案: