use突变卡在inifnite循环中

Question

我正在尝试运行一个查询，该查询使用usemutation将实体保存在数据库中。问题是saveVisa()突变陷入了一个无限循环(多次创建同一个元素(，我不知道为什么会发生这种情况。

import {React, useState, useEffect} from 'react';
import { useRouter } from 'next/router' 
import { SAVE_VISA } from '../src/mutations/applyVisa';
import { useMutation } from "@apollo/client";
const Payment = () => {
const router = useRouter();
var QRCode = require('qrcode');
const [user, setUser] = useState(null);
const { payment_id } = router.query;

useEffect(() => {
setUser(JSON.parse(localStorage.getItem("user")));
}, []);
// // Get QR code image source code
var qr_code = "";
var qr_url = `${process.env.BASE_URL}/visaconfirmation/${payment_id}`;
var opts = {
type: 'text'
}
QRCode.toString(qr_url, opts, function (err, url) {
if (err) throw err
qr_code = url;
});
var qr_code_image = qr_code.replace(/^data:image/[a-z]+;base64,/, "");
// // save visa

const [saveVisa, { 
data 
}] = useMutation(SAVE_VISA, {
variables: {
payment_detail_id: payment_id,
qr_url: qr_url,
qr_image: qr_code_image,
status: "Active"
}
});
saveVisa();
// Send Email
return (
<div>
<h1 className='pt-10 text-center text-1xl'>Your Payment Was succesfully! Please Check your Email for more details.</h1>
</div>
)
}
export default Payment;

Answer 1

saveVisa在每个渲染上运行。由于它是一个突变，它将使页面重新呈现，将您困在一个无限循环中。

为了避免这种情况，正如@Chris Li和@julialves所建议的那样，您可以使用没有依赖关系的useEffect钩子，这将使该函数仅在页面的第一次呈现时运行：

useEffect(() => {
saveVisa();
}, []);

Answer 2

saveVisa将调用突变并从服务器获取数据。因此它将呈现该页面并再次调用CCD_ 5。然后将获取数据并再次渲染。。。