मैं रिएक्ट का उपयोग करके नया हूं, इसलिए यह वास्तव में सरल हो सकता है लेकिन मैं इसे अपने आप से बाहर नहीं निकाल सकता, भले ही मैंने कुछ शोध किया हो। मुझे माफ कर दो अगर यह बहुत गूंगा है।
प्रसंग
मैं लारवेल (बैकएंड) और रिएक्ट (फ्रंट-एंड) एडेप्टर के साथ Inertia.js का उपयोग कर रहा हूं । यदि आप जड़ता को नहीं जानते हैं, तो यह मूल रूप से है:
Inertia.js आपको क्लासिक सर्वर-साइड रूटिंग और कंट्रोलर्स का उपयोग करके आधुनिक सिंगल-पेज रिएक्ट, Vue और Svelte ऐप्स को जल्दी से बनाने देता है।
मुद्दा
मैं एक साधारण लॉगिन पेज बना रहा हूं जिसमें एक फॉर्म है जिसे सबमिट करने पर अगले पृष्ठ को लोड करने के लिए एक POST अनुरोध किया जाएगा। यह ठीक काम करने लगता है लेकिन अन्य पृष्ठों में कंसोल निम्नलिखित चेतावनी दिखाता है:
चेतावनी: अनमाउंट किए गए घटक पर प्रतिक्रिया स्थिति अद्यतन नहीं कर सकता। यह एक नो-ऑप है, लेकिन यह आपके एप्लिकेशन में मेमोरी लीक होने का संकेत देता है। उपयोग करने के लिए, क्लीनअप फ़ंक्शन में सभी सदस्यताएँ और अतुल्यकालिक कार्यों को रद्द करें।
लॉगिन में (Inertia द्वारा निर्मित)
संबंधित कोड (मैंने अप्रासंगिक लाइनों से बचने के लिए इसे सरल बनाया है):
import React, { useEffect, useState } from 'react'
import Layout from "../../Layouts/Auth";
{/** other imports */}
const login = (props) => {
const { errors } = usePage();
const [values, setValues] = useState({email: '', password: '',});
const [loading, setLoading] = useState(false);
function handleSubmit(e) {
e.preventDefault();
setLoading(true);
Inertia.post(window.route('login.attempt'), values)
.then(() => {
setLoading(false); // Warning : memory leaks during the state update on the unmounted component <--------
})
}
return (
<Layout title="Access to the system">
<div>
<form action={handleSubmit}>
{/*the login form*/}
<button type="submit">Access</button>
</form>
</div>
</Layout>
);
};
export default login;अब, मुझे पता है कि मुझे एक सफाई कार्य करना है क्योंकि अनुरोध का वादा इस चेतावनी को उत्पन्न कर रहा है। मुझे पता है कि मुझे इसका उपयोग करना चाहिए useEffectलेकिन मुझे नहीं पता कि इस मामले में इसे कैसे लागू किया जाए। मैंने उदाहरण देखा है जब एक मूल्य बदल जाता है, लेकिन इस तरह के कॉल में कैसे करें?
अग्रिम में धन्यवाद।
अपडेट करें
अनुरोध के अनुसार, इस घटक का पूरा कोड:
import React, { useState } from 'react'
import Layout from "../../Layouts/Auth";
import { usePage } from '@inertiajs/inertia-react'
import { Inertia } from "@inertiajs/inertia";
import LoadingButton from "../../Shared/LoadingButton";
const login = (props) => {
const { errors } = usePage();
const [values, setValues] = useState({email: '', password: '',});
const [loading, setLoading] = useState(false);
function handleChange(e) {
const key = e.target.id;
const value = e.target.value;
setValues(values => ({
...values,
[key]: value,
}))
}
function handleSubmit(e) {
e.preventDefault();
setLoading(true);
Inertia.post(window.route('login.attempt'), values)
.then(() => {
setLoading(false);
})
}
return (
<Layout title="Inicia sesión">
<div className="w-full flex items-center justify-center">
<div className="w-full max-w-5xl flex justify-center items-start z-10 font-sans text-sm">
<div className="w-2/3 text-white mt-6 mr-16">
<div className="h-16 mb-2 flex items-center">
<span className="uppercase font-bold ml-3 text-lg hidden xl:block">
Optima spark
</span>
</div>
<h1 className="text-5xl leading-tight pb-4">
Vuelve inteligente tus operaciones
</h1>
<p className="text-lg">
Recoge data de tus instalaciones de forma automatizada; accede a información histórica y en tiempo real
para que puedas analizar y tomar mejores decisiones para tu negocio.
</p>
<button type="submit" className="bg-yellow-600 w-40 hover:bg-blue-dark text-white font-semibold py-2 px-4 rounded mt-8 shadow-md">
Más información
</button>
</div>
<div className="w-1/3 flex flex-col">
<div className="bg-white text-gray-700 shadow-md rounded rounded-lg px-8 pt-6 pb-8 mb-4 flex flex-col">
<div className="w-full rounded-lg h-16 flex items-center justify-center">
<span className="uppercase font-bold text-lg">Acceder</span>
</div>
<form onSubmit={handleSubmit} className={`relative ${loading ? 'invisible' : 'visible'}`}>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-semibold mb-2" htmlFor="email">
Email
</label>
<input
id="email"
type="text"
className=" appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 outline-none focus:border-1 focus:border-yellow-500"
placeholder="Introduce tu e-mail.."
name="email"
value={values.email}
onChange={handleChange}
/>
{errors.email && <p className="text-red-500 text-xs italic">{ errors.email[0] }</p>}
</div>
<div className="mb-6">
<label className="block text-gray-700 text-sm font-semibold mb-2" htmlFor="password">
Contraseña
</label>
<input
className=" appearance-none border border-red rounded w-full py-2 px-3 text-gray-700 mb-3 outline-none focus:border-1 focus:border-yellow-500"
id="password"
name="password"
type="password"
placeholder="*********"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p className="text-red-500 text-xs italic">{ errors.password[0] }</p>}
</div>
<div className="flex flex-col items-start justify-between">
<LoadingButton loading={loading} label='Iniciar sesión' />
<a className="font-semibold text-sm text-blue hover:text-blue-700 mt-4"
href="#">
<u>Olvidé mi contraseña</u>
</a>
</div>
<div
className={`absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center ${!loading ? 'invisible' : 'visible'}`}
>
<div className="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</form>
</div>
<div className="w-full flex justify-center">
<a href="https://optimaee.com">
</a>
</div>
</div>
</div>
</div>
</Layout>
);
};
export default login;.then(() => {})?