React中使用Axios获取数据后点击按钮无法获取目标数字数组

1. 修复按钮点击事件绑定错误 #

你的按钮代码中onClick={mappingNumbers()}会在组件渲染时立即执行函数，而非点击时触发。需要改为传递函数引用：

<a href="#" className="button" onClick={mappingNumbers}>
  <p className="bttn-p">GERAR NÚMEROS</p>
</a>

2. 修正mappingNumbers函数的逻辑错误 #

原函数里的setMyGameNumbers==game是比较操作，完全没有正确设置状态，同时map的用法也不符合需求：

• 如果你想获取第一个游戏的数字数组：

function mappingNumbers(){
  // 确保game数组有数据
  if(game.length === 0) return;
  // 提取第一个game的numbers数组
  const targetNumbers = game[0].numbers;
  setMyGameNumbers(targetNumbers);
}

// 监听myGameNumbers变化，查看最新值
React.useEffect(() => {
  if(myGameNumbers.length > 0){
    console.log(myGameNumbers);
  }
}, [myGameNumbers]);

• 如果你想随机获取一个游戏的数字数组：

function mappingNumbers(){
  if(game.length === 0) return;
  const randomIndex = Math.floor(Math.random() * game.length);
  const targetNumbers = game[randomIndex].numbers;
  setMyGameNumbers(targetNumbers);
}

3. 修正初始加载的判断逻辑 #

原代码if (!game) return null;无效，因为空数组[]在布尔判断中为true，应该改为判断数组长度：

if (game.length === 0) return <div>加载中...</div>;

4. 额外注意事项 #

• 确保API返回的是完整的JSON格式，你提供的API返回内容有截断，需确认后端返回的是闭合的数组（比如结尾应为}]），否则Axios解析会出错。
• React状态更新是异步的，不要在调用setMyGameNumbers后立即console.log(myGameNumbers)，而是通过useEffect监听状态变化来查看最新值。

内容的提问来源于stack exchange，提问作者vitoriac