每次当Express API返回一个随机数时，Axios和反应性垃圾邮件API
每次当Express API返回一个随机数时，Axios和反应性垃圾邮件API
提问于 2022-10-31 12:03:53
我正在尝试构建一个react组件，它显示一个基于API响应的随机数。但是我注意到显示的数字是无限重呈现的，当我检查服务器控制台时，它会收到来自react的无限请求。如何解决这个问题？我使用react状态来显示数字。
API randomnumber.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;反应组分
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>
</>
)
}我希望服务器在每个请求中返回一个随机数，并将呈现该数字。
回答 2
Stack Overflow用户
发布于 2022-10-31 12:09:56
您必须在副作用钩子中执行useEffect，或者可以使用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调用，并且它会设置一个新的状态，该状态会再次导致重新呈现，而相同的循环重复则会导致无限的请求。
Stack Overflow用户
发布于 2022-10-31 12:11:01
您不能像在示例中那样更新状态，因为每个setState调用都将触发重新呈现，并将重新评估代码，最后在无限循环中结束。相反，您应该使用onComponentMount钩子和空依赖数组调用获取逻辑“useEffect”：
useEffect(() => {
axios({
method: "get",
url: "/api/random-number",
}).then(
((result) => {
setNumber(result.data.number)
})
)
}, [])页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74263002
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号