Question

使用 axios 发出 get 请求时获取空数组

2023-01-09

298

javascript reactjs arrays react-hooks axios

嗨 :) 我正在尝试从我的 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);
}

这是触发该功能的按钮：

 <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 中，您映射了 game ，并对 setMyGameNumbers 函数进行了一些检查 == ，但这不起作用。正确的语法应该是这样的 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>