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内部的代码。

数据获取，尽管我还没有单击按钮

1 个答案: