আমি প্রতিক্রিয়া ব্যবহার করে নতুন, তাই এটি অর্জন করা সত্যিই সহজ তবে আমি কিছু গবেষণা করেও নিজের দ্বারা এটি বের করতে পারি না। যদি খুব বোবা হয় তবে আমাকে ক্ষমা করুন।
প্রসঙ্গ
আমি লারভেল (ব্যাকএন্ড) এবং প্রতিক্রিয়া (ফ্রন্ট-এন্ড) অ্যাডাপ্টারগুলির সাথে Inertia.js ব্যবহার করছি । আপনি যদি জড়তা না জানেন তবে এটি মূলত:
জড়তা.জেএস আপনাকে দ্রুত ক্লাসিক সার্ভার-সাইড রাউটিং এবং কন্ট্রোলার ব্যবহার করে আধুনিক একক পৃষ্ঠার প্রতিক্রিয়া, ভ্যু এবং স্বেল্ট অ্যাপ্লিকেশনগুলি তৈরি করতে দেয়।
সমস্যা
আমি একটি সাধারণ লগইন পৃষ্ঠা করছি যা একটি ফর্ম রয়েছে যা জমা দেওয়ার পরে পরবর্তী পৃষ্ঠাটি লোড করার জন্য একটি পোষ্ট অনুরোধ সম্পাদন করবে। এটি ঠিকঠাক কাজ করেছে বলে মনে হচ্ছে তবে অন্যান্য পৃষ্ঠাগুলিতে কনসোলটি নিম্নলিখিত সতর্কতা দেখায়:
সতর্কতা: আনমাউন্ট থাকা উপাদানগুলিতে প্রতিক্রিয়া স্থিতি আপডেট করতে পারে না। এটি কোনও অপশন নয়, তবে এটি আপনার অ্যাপ্লিকেশনটিতে একটি মেমরি ফাঁস নির্দেশ করে। সমাধানের জন্য, ব্যবহারের প্রভাব পরিষ্কার ক্লিনআপ ফাংশনে সমস্ত সাবস্ক্রিপশন এবং অ্যাসিঙ্ক্রোনাস টাস্ক বাতিল করুন।
লগ ইন (জড়তা দ্বারা নির্মিত)
সম্পর্কিত কোড (অপ্রাসঙ্গিক লাইনগুলি এড়ানোর জন্য আমি এটি সরলীকরণ করেছি):
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(() => {})?