1

Estou estudando JavaScript e preciso fazer uma filtragem de dados baseado no que a pessoa digitar e apagar no input de forma dinâmica. Pesquisei e não consegui implementar no meu código, estou usando o useEffect() para pegar as notícias principais e já está funcionando, mas não consigo fazer a busca.

useEffect(() => {
    api.get('/v2/top-headlines?country=br&apiKey=85444b264aa246f28c5f41494efd6e03').then(async response => {
        setNews(response.data.articles)
    })
});

  return (
      <>
        <Navbar />

        <div className="row px-5 input-area">
            <input onChange={(e) => setSearch(e.target.value)} type="text" className="form-control text-center input-text" placeholder="Search News" />
        </div>

        <div className="row">
            {news.map(news => (
                <div className="col-md-6">
                    <Card img={news.urlToImage} title={news.title} description={news.description} author={news.source.name} url={news.url} key={news.source.name} />
                </div> //
            ))}
        </div>
    </>
  )
}

se alguem puder me ajudar ficaria eternamente grato <3.

3
  • A busca ja pega todas as notícias e você vai filtrar os dados ja coletados ou você vai buscar as notícias quando o conteudo do input mudar? Commented 14/09/2020 às 16:59
  • Quero carregar a página com todo o conteúdo da API, que tem tipo uma requisição que voltam os resultados mais relevantes de acordo com o parâmetro utilizado 'country=br' se colocar us vão trazer notícias relevantes dos eua, mas tem outra requisição com um parâmetro tipo search, 'q=memesdegatos' dai ele vai buscar notícias relacionadas a esse parâmetro. Dai quero botar no onChange do input para ele disparar uma função que busca de acordo com essa busca. Commented 14/09/2020 às 18:10
  • Agora o meu limite de requisições a API se excederam hoje, então só dá pra testar amanhã =( Commented 14/09/2020 às 18:14

1 Resposta 1

1

O useEffect possui um array de dependencias, TODAS os estados que você colocar dentro desse array irá fazer com que todo o processo dentro do useEffect ocorra novamente sempre que algum desses estados mudar. Exemplo:

useEffect(() => {
   console.log('olá mundo')
}, [estado1, estado2])

// Aqui, **sempre que o estado1 ou o estado2 mudar, o console.log será executado**

Podemos usar o array de dependencias para resolver o seu problema:

const [search, setSearch] = useState('') //estado que irá guardar o valor do input

useEffect(() => {
 let apiEndpoint = '/v2/top-headlines?country=br&apiKey=85444b264aa246f28c5f41494efd6e03'

 if(search.length !== 0) {        //se o valor do input conter alguma informação, coloca-la na query para filtrar as noticias
   apiEndpoint += `&q=${search}'
 }

 api.get(apiEndpoint).then(async response => {
        setNews(response.data.articles)
 })

}, [search]) // repete o processo sempre que o valor do input mudar

return (
      <>
        <Navbar />

        <div className="row px-5 input-area">
            <input onChange={(e) => setSearch(e.target.value)} type="text" className="form-control text-center input-text" placeholder="Search News" />
        </div>

        <div className="row">
            {news.map(news => (
                <div className="col-md-6">
                    <Card img={news.urlToImage} title={news.title} description={news.description} author={news.source.name} url={news.url} key={news.source.name} />
                </div> //
            ))}
        </div>
    </>
  )

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .