React Router හි FormData සමඟ දත්ත යාවත්කාලීන කිරීම

ගබඩාවේ තිබෙන නිෂ්පාදන දත්ත යාවත්කාලීන කිරීම සඳහා අපට updateProduct ශ්‍රිතය ඇත. දැන් අපගේ සංස්කරණ පෝරමයෙන් ලැබෙන දත්ත වෙත යමු.

HTML පෝරමයක් යොමු කරන විට, බ්‍රවුසරය FormData වස්තුවක් සාදා එහි දත්ත සේවකයා වෙත ඉල්ලීමේ ශරීරය තුළ යවයි. එපමණක් නොව, සෑම ආදානයකම අගය name ගුණාංගයෙන් (එබැවින් පෝරමයේ ඒවා අවශ්‍ය වූයේ, මතකද?) වස්තුවකට උපුටා ගනී. දැන් අපි දනිමු React Router ඉල්ලීම් සේවකයා වෙත නොව, අපගේ මාර්ගයේ action ක්‍රමයට යවන බවත්, ඒ හා සමඟම FormData ද එහි පැමිණෙන බවත්. අපි මේ සමඟ වැඩ කරමු.

පළමුව, අපගේ edit.jsx ගොනුව විවෘත කර updateProduct ආයාත කරමු:

import { updateProduct } from '../forStorage';

ඉන්පසුව, අපි කලින් කළ ආකාරයටම මාර්ග වස්තුව සඳහා action ශ්‍රිතයක් ලියමු. එය loader ශ්‍රිතයට පසුවම එකතු කරමු. අපි එයට අපගේ request සහ URL පරාමිති යොමු කරමු:

export async function action({ request, params }) {}

ඉල්ලීමෙන් අපි FormData ලබා ගන්නෙමු, ඉන්පසු එයින් දත්ත යතුරු: අගය යුගල අඩංගු වස්තුවක් ලෙස උපුටා ගෙන updateProduct භාවිතයෙන් ඒ දත්ත ගබඩාවට යවමු:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

දැන් ඉතිරිව ඇත්තේ main.jsx වෙත ගොස් action ශ්‍රිතය සංස්කරණ මාර්ග වස්තුවට එකතු කිරීම පමණි. අපි action ආයාත කරමු:

import EditProduct, {
	loader as editProductLoader,
	action as editAction,
} from './routes/edit';

එය සංස්කරණ මාර්ග වස්තුවට එකතු කරමු:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

දැන් යෙදුම අඛණ්ඩව ක්‍රියාත්මක කරන්න, ලැයිස්තුවට නිෂ්පාදන කිහිපයක් එක් කරන්න, ඉන්පසු ඒවා ක්ලික් කර පෝරමය පුරවා සුරැකීමේ බොත්තම ක්ලික් කරන්න. සංවර්ධක පැනලයේ localforage කොටසට ගොස් ගබඩාව නැවුම් කිරීමට අමතක නොකරන්න. දැන් keyvaluespairs කොටසේ අපට අපගේ ඇතුළත් කළ දත්ත සහිත products අරාව තුළ වස්තු දැක ගත හැකිය.

පසුගිය පාඩමේ කාර්යයන් සඳහා ඔබ නිර්මාණය කළ යෙදුම ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, ශිෂ්‍ය දත්ත සංස්කරණය කිරීමේ මාර්ගය සඳහා action ශ්‍රිතයක් සාදන්න, එය සංස්කරණ මාර්ග වස්තුවට එකතු කරන්න. සංවර්ධක පැනලය විවෘත කර වෙනස් කිරීම් සිදු කරන විට යාවත්කාලීන කළ දත්ත සැබවින්ම localforage ටැබ් එකේ දර්ශනය වන බව තහවුරු කර ගන්න.