当Express API每次返回随机数时，Axios和React会向API发送垃圾邮件

oxf4rvwz 于 2022-11-05 发布在 iOS

关注(0)|答案(2)|浏览(155)

我试图构建一个react组件，它显示基于API响应的随机数。但是我注意到显示的数字被无限地重新呈现，并且当我检查服务器控制台时，它接收到来自react的无限请求。如何解决这个问题？我正在使用react状态来显示数字。
API随机数. js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    let randomNumber = Math.floor(Math.random() * 100);
    res.send({
        "number": randomNumber
    })
});
module.exports = router;

React组件

import react, { useEffect, useState } from "react"
import axios from 'axios'

interface Props {

}

export default function RandomNumber(props: Props) {
    const [number, setNumber] = useState(0);
    axios({
        method: "get",
        url: "/api/random-number",

    }).then(
        ((result) => {
            setNumber(result.data.number)
        })
    )

    return (
        <>
            <h1>{number}</h1>
        </>
    )
}

我希望服务器对每个请求返回1个随机数，并将呈现该数字。

axios

来源：https://stackoverflow.com/questions/74263002/axios-and-react-spams-api-when-express-api-returns-a-random-number-everytime

2条答案

按热度按时间

aiqt4smr1#

你必须在useEffect Hook中做副作用，或者你可以使用像TANstack查询等这样的库，但这取决于情况，像这样一个简单的库应该可以完成这项工作...

export default function RandomNumber(props: Props) {
  const [number, setNumber] = useState(0);

  React.useEffect(() => {
    axios({
      method: "get",
      url: "/api/random-number",
    }).then((result) => {
      setNumber(result.data.number);
    });
  }, []);   // `[]` means run the effect once on mount

  return (
    <>
      <h1>{number}</h1>
    </>
  );
}

在您的代码中，实际发生的情况是，在每次渲染时，都会发生axios调用，它会设置一个新状态，从而导致再次重新渲染，并且重复相同的循环，从而导致无限的请求

赞(0）回复(0）举报 2022-11-05

cnh2zyt32#

您不能像在示例中那样更新状态，因为每次setState调用都会触发重新呈现，并再次重新计算代码，最终进入无限循环。相反，您应该使用useEffect挂钩和空依赖项数组调用获取逻辑“onComponentMount”：

useEffect(() => {
   axios({
    method: "get",
    url: "/api/random-number",

    }).then(
        ((result) => {
            setNumber(result.data.number)
    })
)
}, [])

赞(0）回复(0）举报 2022-11-05

我来回答

当Express API每次返回随机数时，Axios和React会向API发送垃圾邮件

2条答案

相关问题

热门标签

最新问答