Получение данных, хотя я еще не нажимаю на кнопку

Question

сейчас учусь реагировать. Я все еще новичок в этом. Итак, я делаю небольшой код здесь.

import React, { useState, useEffect } from "react";
import axios from "axios";

const Search = () => {
  const [data, setData] = useState({});
  const [country, setCountry] = useState("");
  const [countryFromButtonClick, setCountryFromButtonClick] = useState();

  useEffect(() => {
    axios
      .get(`https://corona.lmao.ninja/countries/${countryFromButtonClick}`)
      .then(res => {
        console.log(res.data);
        setData(res.data);
      })
      .catch(err => {
        console.log(err);
        console.log(err.response.data.message);
      });
  }, [countryFromButtonClick]);

  const HandleChange = e => {
    setCountry(e.target.value);
  };

  const handleClick = () => {
    setCountryFromButtonClick(country);
  };

  return (
    <section id="search-country">
      <h1> Number of Cases </h1>
      <div className="container-fluid">
        <div className="input-group mb-3">
          <input
            type="text"
            className="form-control"
            placeholder="Search Country..."
            value={country}
            onChange={HandleChange}
          />
          <div className="input-group-append">
            <button
              className="btn btn-outline-secondary"
              type="button"
              id="button-addon2"
              onClick={handleClick}
            >
              Search
            </button>
          </div>
        </div>
        <h1>
          {data.country} {data.cases}
        </h1>
      </div>
    </section>
  );
};

export default Search;

Проблема в том, что я пока не нажимаю кнопку поиска, но она уже извлекает данные. Консоль показывает ошибку от console.log(err). Могу ли я что-нибудь сделать, чтобы данные доставались только при нажатии кнопки?

Спасибо.

Answer 1

Что случилось?

Итак, когда вы используете useEffect ловушку и помещаете любую переменную в массив, код выполняется из-за измененного значения, поэтому, если вы хотите получить это, Я рекомендую создать функцию с кодом внутри useEffect.