使用 axios 发出获取请求时变空 arrays

Question

嗨 :) 我正在尝试从我的 api 中获取一组数字，返回如下内容： [{"numbers":[9,7,56,58,48,18],"gameId":1},{"numbers":[3,8,10,60,35,5],"gameId":2},{"numbers":[39,24,33,26,48,55],

我正在使用 axios，每次我发出请求时都会发生以下情况： [] length: 0 [[Prototype]]: Array(0)

这是我的代码：

const[game,setGame]= React.useState([]);
var[myGameNumbers, setMyGameNumbers]=React.useState([]);

React.useEffect(()=>{
    axios.get("http://localhost:8080/games/game12").then((response)=>{
     setGame(response.data);
    });
  }, []);
  if (!game) return null;

function mappingNumbers(){
    game.map((game) => (
        setMyGameNumbers==game
    ));
    if(!myGameNumbers) return null; else console.log(myGameNumbers);
}

这是触发 function 的按钮：

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

我正在寻找一种方法来获取我的数组编号，如下所示：每次单击按钮时[9,7,56,58,48,18] 。 如果有人知道如何提供帮助，我将不胜感激：D

如果有任何遗漏，这是我的完整代码： https://github.com/vitoriaacarvalho/jogando-na-mega-sena/tree/main/front/jogando-na-mega

Answer 1

在您的mappingNumbers ，您 map 在game中对setMyGameNumbers function 进行一些检查== ，这将不起作用。 正确的语法类似于setMyGameNumbers(game)

您还检查myGameNumbers是否不存在，但它始终存在，因为初始值为空数组[]这就是console.log记录空数组的原因。

...

if (!game) return null;

// will log everytime when a state gets updated
// and if the above statement is false
console.log("myGameNumbers", myGameNumbers);

function mappingNumbers() {
  if (game.length < 1) return null;
  setMyGameNumbers(game);
}

使用正确的语法更新了onClick

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