-1

Não consigo de jeito nenhum fazer com que a minha search bar no React funcione para filtrar os resultados vindo do meu backend em Mongoose. Eu consigo mostrar todos os pets, mas quando eu tento procurar algo não aparece nada.

BackEnd (MongoDB/Mongoose)

static async getAll(req, res) {
    const query = req.query;
    if (Object.keys(query).length === 0) {
      Pet.find({}, (err, pets) => {
        if (err) return res.status(500).send(err);
        res.status(200).json({
          pets,
        });
      }).sort('-createdAt');
    } else {
      Pet.find(query, (err, pets) => {
        if (err) return res.status(500).send(err);
        res.status(200).json({
          pets,
        });
      }).sort('-createdAt');
    }
  }

FrontEnd em React:

const Adopt = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [pets, setPets] = useState([]);

  useEffect(() => {
    api
      .get(`/pets`)
      .then((response) => {
        setPets(response.data.pets);
      })
      .catch((err) => console.log(err));
  }, []);


  const handleOnChangeSearch = (e) => {
    setSearchTerm(e.target.value);
  };

  const handleOnClickSearch = (e) => {
    e.preventDefault();
    api
      .get('/pets', { params: { name: searchTerm } })
      .then((res) => setPets(res.data))
      .catch((err) => console.log(err));
  };

1 Resposta 1

-1

Dentro de

  useEffect(() => {
    api
      .get(`/pets`)
      .then((response) => {
        setPets(response.data.pets);
      })
      .catch((err) => console.log(err));
  }, []);

Você atribui a pets a seguinte resposta do servidor: response.data.pets

Já na busca

const handleOnClickSearch = (e) => {
    e.preventDefault();
    api
      .get('/pets', { params: { name: searchTerm } })
      .then((res) => setPets(res.data))
      .catch((err) => console.log(err));
  };

Você atribiu somente o data: .then((res) => setPets(res.data))

Talvez alterar para .then((res) => setPets(res.data.pets)) resolva?

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 .