React 元素不断重新渲染而没有更改

Question

我最近学习了 React，我正在尝试构建一个简单的应用程序来学习它。 现在，如果我没记错的话，React 应该在我每次调用 setState 或道具发生一些变化时重新渲染。 但是，当我在里面运行带有 console.log 的代码时，我的控制台会被日志淹没，比如每秒 10 个。 难道我做错了什么？ 有没有办法避免这种情况？

这是调用日志的 function：

function SingleCountry(props) {
    const [selectedCountry, setSelectedCountry] = useState("");

    const populateCountries = props.countries.map((elem, i) => {
        return (<option key={i}>{elem.country}</option>)
    });
    const findCountry = props.countries.filter((elem) => {
        return elem.country === selectedCountry;
    });

    console.log(findCountry);

    return (
        <>
        <div>
            <Form>
                <Form.Group as={Row} controlId="test">
                <Form.Control as="select" value="Selected Country..." 
                 onChange={e => setSelectedCountry(e.target.value)}>
                    <option>Select Country...</option>
                    {populateCountries}
                </Form.Control>
                </Form.Group>
            </Form>
        </div>
        <div>
            <p>TODO: Print selected country...</p>
        </div>
        </>
    )
}

...这是父 function

function Home() {
    const [worldData, setWorldData] = useState();
    const [countries, setCountries] = useState([]);
    const [loading, setLoading] = useState(true);


    useEffect(() => {
        Axios.all([
            Axios.get("https://corona.lmao.ninja/v2/all"),
            Axios.get("https://corona.lmao.ninja/v2/countries"),
        ])
        .then((response) => {
            setWorldData(response[0].data);
            setCountries(response[1].data);
        })
        .catch((err) => {
            console.log(err);
        })
        .finally(() => {
            setLoading(false);
        })

    }, [worldData, countries]);

    return (
       <div>
           {loading === true && (
               <Loading />
           )}
           {loading === false && (
               <>
               <WorldData data={worldData} />
               <SingleCountry countries={countries} />
               </>
           )}
       </div>
    );
}

当我从 App.js 启动 Home 时，我的控制台最终是这样的

控制台的图像

它不断向日志发送垃圾邮件。

编辑：我发布的图像实际上是在 select 下拉列表中的 select 之后的控制台日志，这就是为什么里面有东西但即使在我做任何事情之前日志仍然会触发的原因。 这不是很重要，但只是为了清楚。

Answer 1

这是因为您每次收到世界数据和国家/地区时处理useEffect的方式，state 因为您正在设置它而发生变化，但是由于在您对 useEffect 的依赖项中，您已经为它提供了世界数据和国家，它将重新运行。 这意味着它将一次又一次地获取它们。 尝试这个：

 useEffect(() => {
        Axios.all([
            Axios.get("https://corona.lmao.ninja/v2/all"),
            Axios.get("https://corona.lmao.ninja/v2/countries"),
        ])
        .then((response) => {
            setWorldData(response[0].data);
            setCountries(response[1].data);
        })
        .catch((err) => {
            console.log(err);
        })
        .finally(() => {
            setLoading(false);
        })

    }, []);

空数组意味着它只会在组件挂载时运行一次。

Answer 2

从您发布的代码中，我猜您还应该看到 Axios 一遍又一遍地获取。 问题是useEffect ，它是Home内的监听对象。 每当worldData或countries地区发生变化时，它将运行 fetch 调用。 所以你在这个 function 中设置了worldData ，它正在监听它，所以它正在回忆自己。 将侦听器更改为setWorldData和setCountries ，获取和呈现应该按预期工作。