javascript - 为什么我的 ReactJs 循环下拉列表会自动调用多次

Question

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

const App = () => {
const [num, setNum] = useState();
const [name, setName] = useState();
const [moves, setMoves] = useState();


    useEffect(() => {
    async function pokemonAPI() {
        const getPokemon = await axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`);
        console.log(getPokemon.data.name);
        setName(getPokemon.data.name);
        setMoves(getPokemon.data.moves.length);
    }
    pokemonAPI();
    

 // this function call many times automatically how can I fix this.  

    **function dropDown() { // this function call many times itself
        for (var y = 0; y <101; y++) {
            document.getElementById("100dropdown").innerHTML += ("<option value =" + y + " >" + y + "</option>");
        }
    }
    dropDown();**   
});

// its works fine on first reload of page but when i choose any number this function call it many times 

return (
    <>
            <div className="main_div">
            <h1 className="choose_value">
                Please Choose your <strong>  Pokemon </strong> Value <br />
                <select name="100dropdown" id="100dropdown" value={num} onChange={(event) => {
                    setNum(event.target.value);
                }}>
                 
                </select>
            </h1>
            <div className="pokemonList">
                <h1>You've choose <span style={{ color: 'green' }}> {num} </span> value</h1>
                <h1>Your Pokemon is <span style={{ color: 'red' }}> {name}</span></h1>
                <h1>Your Pokemon has <span style={{ color: 'blue' }}> {moves}</span> moves </h1>
            </div>
        </div>
    </>
  );
}
export default App;

Answer 1

问题useEffect缺少依赖项，因此每次组件渲染时都会触发效果回调。 pokemonAPI更新状态，因此每次都会触发新的渲染。这会创建一个渲染循环，所以 dropDown也将被称为每个渲染。
此外，我看不出任何原因 dropDown应该在 useEffect 中声明根本。它渲染静态数据并改变 DOM，这是 React 中的一种反模式。
解决方案
修复依赖，添加 num GET 请求中使用的，并删除 dropDown功能:

useEffect(() => {
  async function pokemonAPI() {
    const getPokemon = await axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`);
    console.log(getPokemon.data.name);
    setName(getPokemon.data.name);
    setMoves(getPokemon.data.moves.length);
  }
  pokemonAPI();
}, [num]); // <-- add dependency array!

如果您需要更多地运行效果，则添加任何丢失的依赖项，您的 linter 也可能会提示。
使用 id="100dropdown" 计算并渲染元素内 JSX 中的选择选项.

<select
  name="100dropdown"
  id="100dropdown"
  value={num}
  onChange={(event) => setNum(event.target.value)}
>
  {Array.from({ length: 100 }, (v, i) => i)).map(i => (
    <option key={i} value={i}>{i}</option>
  ))}
</select>