Фильтр массива с флажком и входной реакцией - PullRequest
Новая
       24

Фильтр массива с флажком и входной реакцией

0 голосов
/ 01 мая 2020

Привет, ребята, у меня есть функция фильтра для массива, который я экспортирую из узла. Я хочу поставить 2 условия перед тем, как фильтровать объект в моем массиве 1 для проверки юниверса символа и один для имени. фильтр работает отдельно, но когда я объединяю два, только 1 работает. Вот мой код:

функция фильтра: FilterCharacter. 

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 символом, но я хочу, чтобы поиск выполнялся только в том случае, если я ввел минимум 3 символа в поле ввода, как при выборе юниверса звездных войн, и мне нужно набрать minimun "Luk "на входе для поиска Люк Скайуокер. Но в тот момент, когда я выбираю звездные войны в чекбоксе и набираю L, сразу отображается luke, но я хочу иметь минимальный Luk. Я надеюсь, вы понимаете меня, какой-нибудь совет? Спасибо!

1 Ответ

0 голосов
/ 02 мая 2020

Я нахожу решение, я изменяю свою функцию 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())
          })
      )
  )

и это работает!

...