Javascript 为什么我的ReactJs循环下拉列表会自动调用多次 import React，{useState，useffect}来自“React”； 从“axios”导入axios； 常量应用=（）=>{ const[num，setNum]=useState（）； const[name，setName]=useState（）； const[moves，setMoves]=useState（）； useffect（（）=>{ 异步函数pokemonAPI（）{ const getPokemon=等待axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`）； log（getPokemon.data.name）； setName（getPokemon.data.name）； setMoves（getPokemon.data.moves.length）； } 口袋妖怪（）； //此函数自动调用多次如何修复此问题。 **函数dropDown（）{//此函数本身多次调用 对于（变量y=0；y 您已经选择了{num}值 你的口袋妖怪是{name} 你的口袋妖怪有{移动}个移动 ); } 导出默认应用程序； 问题

useffect

缺少依赖项，因此它会在每次组件渲染时触发效果回调。

pokemonAPI

会更新状态，以便每次都会触发一个新渲染。这会创建一个渲染循环，因此

下拉列表也将被称为每个渲染

此外，我看不出有任何理由要在
useffect
中声明
下拉列表
。它呈现静态数据并变异DOM，这是React中的反模式

解决方案
修复依赖项，添加GET请求中使用的
num
，并删除
下拉列表
函数：

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;

正确格式化代码，很难理解代码是如何构造的。如果在没有依赖项的情况下设置useEffect状态，它会重新加载组件，重新运行效果等等…但是当添加“”依赖项数组[]“”，并选择任何数字时，我将无法获取API数据。如果我传递[num]它在下拉菜单中运行良好，但也无法获取data@ShamshadHussain我认为
num
包含在我关于添加linter抱怨的任何依赖项的评论中，但更新了我的答案以明确地指出它。也更新了我的答案以建议呈现选择选项的更优化的解决方案。非常感谢，先生，您能帮我一个忙吗ot@ShamshadHussain欢迎！我的回答能帮助您解决您的问题吗？是的，先生您的回答能解决我的问题谢谢
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!

<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>