டைனமிக் கால்பேக்குகளுடன் ரியாக்ட் டேபிள் வரிசைகளில் தரவை மாற்றுதல்
டைனமிக் அட்டவணையை உருவாக்கும்போது , குறிப்பாக பின்-இறுதியில் இருந்து தரவை ஒருங்கிணைக்கும் போது , தரவு மாற்றங்களைக் கையாள்வது ஒரு முக்கிய பணியாகிறது. பெரும்பாலும், பயனருக்குக் காண்பிக்கும் முன், மூலத் தரவை மாற்றியமைக்க அல்லது வடிவமைக்க வேண்டும். தரவு பூலியன் மதிப்புகள், தேதிகள் அல்லது சிறப்பு வடிவமைப்பு தேவைப்படும் பிற வகைகளைக் கொண்டிருக்கும்போது இது குறிப்பாக உண்மை.
இந்தச் சூழ்நிலையில், லாராவெல் பின்-இறுதியில் இருந்து அனுப்பப்பட்ட நெடுவரிசைகளின் தொகுப்பு எங்களிடம் உள்ளது, அதை மீண்டும் மீண்டும் செய்யவும் மற்றும் ரியாக்டில் அட்டவணை தலைப்புகளை உருவாக்கவும் வேண்டும். ஒவ்வொரு நெடுவரிசையும் வெவ்வேறு வகையான தரவைக் குறிக்கலாம், மேலும் சிலருக்கு மாற்றம் தேவைப்படலாம். உதாரணமாக, TinyInt ஆக சேமிக்கப்பட்ட பூலியன் மதிப்புகள் மதிப்பு 1 அல்லது 0 என்பதைப் பொறுத்து "ஆம்" அல்லது "இல்லை" எனக் காட்டப்பட வேண்டும்.
நெடுவரிசையின் பெயரின் அடிப்படையில் ஜாவாஸ்கிரிப்ட் கால்பேக் செயல்பாட்டை மாறும் வகையில் செயல்படுத்துவதன் மூலம், ஒவ்வொரு வரிசையிலும் உள்ள தரவை நாம் திறமையாக வடிவமைக்க முடியும். இந்த அணுகுமுறை நெகிழ்வுத்தன்மையை அனுமதிக்கிறது, குறிப்பாக வெவ்வேறு நெடுவரிசைகளுக்கு வெவ்வேறு மாற்றங்கள் தேவைப்படும் போது. ரியாக்டின் கூறு அமைப்பு, தரவுகளின் மீது மீண்டும் மீண்டும் செயல்படுவதை எளிதாக்குகிறது மற்றும் இந்த மாற்றங்களை மாறும் வகையில் பயன்படுத்துகிறது.
இந்தக் கட்டுரையில், நெடுவரிசைப் பெயர்களை அவற்றின் தொடர்புடைய கால்பேக் செயல்பாடுகளுக்கு எவ்வாறு வரைபடமாக்குவது என்பதைக் காண்போம். இது உங்களுக்குள் உள்ள தரவை தடையின்றி மாற்ற அனுமதிக்கும் அட்டவணை, நீங்கள் பூலியன்கள், தேதிகள் அல்லது பிற சிறப்பு வகை தரவுகளை கையாளுகிறீர்கள்.
| கட்டளை | பயன்பாட்டின் உதாரணம் | |
|---|---|---|
| Object.keys() | ஒரு பொருளில் இருந்து விசைகளை பிரித்தெடுக்கிறது. இந்தச் சூழலில், ரியாக்ட் டேபிளில் உள்ள வரிசை தரவுப் பொருளிலிருந்து நெடுவரிசைப் பெயர்களைப் பெற இது பயன்படுகிறது. | |
| map() | இந்த முறையானது, Object.keys() வரிசையில் உள்ள ஒவ்வொரு விசையையும் (நெடுவரிசை) மீண்டும் செயல்படுத்துகிறது, இது தரவுகளின் ஒவ்வொரு வரிசைக்கும் மாறும் வகையில் மாற்றங்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. | |
| || (Logical OR) | ஒரு குறிப்பிட்ட நெடுவரிசைக்கு அழைப்பு செயல்பாடு எதுவும் காணப்படவில்லை என்றால், ஃபால்பேக் செயல்பாட்டை வழங்கப் பயன்படுகிறது. எந்த மாற்றமும் இல்லாவிட்டால், மாற்றப்படாத மதிப்புகள் காட்டப்படுவதை இது உறுதி செய்கிறது. | |
| toUpperCase() | பெயர் நெடுவரிசையின் தரவை பெரிய எழுத்துக்கு மாற்ற இங்கே பயன்படுத்தப்படும் ஒரு சரம் முறை. இது ஆர்ப்பாட்டத்திற்குப் பயன்படுத்தப்படும் ஒரு எளிய உருமாற்ற அழைப்பு. | |
| new Date() | ஸ்ட்ரிங் மதிப்பிலிருந்து (created_at அல்லது updated_at போன்றவை) புதிய தேதிப் பொருளை உருவாக்கி, toLocaleDateString()ஐப் பயன்படுத்தி மனிதர்கள் படிக்கக்கூடிய தேதிக்கு வடிவமைக்கிறது. | |
| try...catch | திரும்ப அழைக்கும் செயல்பாடுகளுக்கு பிழை கையாளுதலை செயல்படுத்துகிறது. மாற்றம் தோல்வியுற்றால், அது பிழையைப் பிடித்து அதை பதிவுசெய்து, பயன்பாடு செயலிழக்காமல் இருப்பதை உறுதிசெய்கிறது. | |
| console.error() | திரும்ப அழைக்கும் செயல்பாடு தோல்வியடையும் போது கன்சோலில் பிழைகளை பதிவு செய்யப் பயன்படுகிறது. இது ட்ரை...கேட்ச் பிளாக்கில் உள்ள பிழையைக் கையாளும் பொறிமுறையின் ஒரு பகுதியாகும். | |
| function(value) | இது கால்பேக் பொருளுக்குள் அநாமதேய செயல்பாடுகளை வரையறுக்கிறது, பெயர் அல்லது நிறைவு போன்ற குறிப்பிட்ட நெடுவரிசைகளுக்கு மாற்றங்களை வழங்குகிறது. | |
| <td> | HTML குறிச்சொல், மாற்றப்பட்ட தரவு வரிசையில் வழங்கப்பட்டுள்ள அட்டவணை செல்களை வரையறுக்கப் பயன்படுகிறது. |
ரியாக்ட் டேபிள்களில் கால்பேக்குகளின் டைனமிக் எக்ஸிகியூஷன்
மேலே உள்ள ஸ்கிரிப்ட் எடுத்துக்காட்டுகள் a ஐ டைனமிக் முறையில் செயல்படுத்துவதில் கவனம் செலுத்துகின்றன ஒரு மாறியை அடிப்படையாகக் கொண்ட செயல்பாடு, இந்த விஷயத்தில் ஒரு அட்டவணையில் ஒரு வரிசையின் நெடுவரிசைப் பெயர். ரியாக்ட் டேபிளில் காட்டப்படுவதற்கு முன், லாராவெல் பின்-இறுதியில் இருந்து தரவை மாற்றுவதே முக்கிய பிரச்சனை. பூலியன் மதிப்புகளை "ஆம்" அல்லது "இல்லை" போன்ற படிக்கக்கூடிய லேபிள்களாக மாற்றுவது போன்ற தரவு மாற்றப்பட வேண்டிய நிகழ்வுகளுக்கு இது பயனுள்ளதாக இருக்கும். ஒவ்வொரு நெடுவரிசைக்கும் கால்பேக் செயல்பாடுகளைப் பயன்படுத்துவதன் மூலம், ஒவ்வொரு புலத்திற்கும் ஹார்ட்கோட் மாற்றங்களைச் செய்யாமல் அட்டவணை வரிசைகளின் தரவை மாறும் வகையில் சரிசெய்யலாம்.
ஒரு முக்கிய கருத்து பயன்பாடு ஆகும் , இது வரிசை தரவிலிருந்து அனைத்து நெடுவரிசைப் பெயர்களையும் பிரித்தெடுக்க அனுமதிக்கிறது. இந்தச் செயல்பாடு ஒவ்வொரு நெடுவரிசையிலும் மீண்டும் செயல்பட உதவுகிறது, இதன் மூலம் நாம் திரும்பப்பெறுதல் செயல்பாடு மூலம் தொடர்புடைய மாற்றத்தைப் பயன்படுத்தலாம். தி முறை இந்த செயல்முறையின் மற்றொரு இன்றியமையாத பகுதியாகும், இது ஒவ்வொரு விசையையும் கடந்து, அழைப்புப் பொருளில் சேமிக்கப்பட்ட தொடர்புடைய உருமாற்ற செயல்பாட்டை செயல்படுத்த அனுமதிக்கிறது. தி ஆபரேட்டர் (||) ஒரு நெடுவரிசையில் குறிப்பிட்ட மாற்றம் இல்லாவிட்டாலும், மூலத் தரவைத் திருப்பித் தருவதே இயல்புநிலை நடவடிக்கையாக இருக்கும் என்பதை உறுதி செய்கிறது.
எடுத்துக்காட்டாக, "முடிக்கப்பட்ட" நெடுவரிசையில் 1 அல்லது 0 இருக்கும், இது ஒரு பணி முடிந்ததா இல்லையா என்பதைக் குறிக்கும். ஸ்கிரிப்ட் "முழுமைப்படுத்தப்பட்ட" நெடுவரிசைக்கான கால்பேக்கைப் பயன்படுத்துகிறது, அது மதிப்பு உண்மையா (1) அல்லது தவறானதா (0) என்பதைச் சரிபார்த்து, பின்னர் "ஆம்" அல்லது "இல்லை" என்பதை வழங்குகிறது. "தடைசெய்யப்பட்டது" அல்லது "has_uploaded" போன்ற பல நெடுவரிசைகளுக்கான "செயலில்" போன்ற பகிரப்பட்ட கால்பேக் செயல்பாடுகளை உருவாக்குவதன் மூலம் இது மற்ற பூலியன் புலங்களுக்கு எளிதாக நீட்டிக்கப்படலாம். ஒவ்வொரு துறைக்கும் ஒரே மாதிரியான தர்க்கத்தை நகலெடுக்காமல் குறியீட்டில் நெகிழ்வுத்தன்மை மற்றும் மறுபயன்பாட்டை இது உறுதி செய்கிறது.
ஸ்கிரிப்ட் பயன்படுத்தி பிழை கையாளுதல் அடங்கும் . ஒரு கால்பேக் செயல்பாடு தோல்வியுற்றாலோ அல்லது எதிர்பாராத தரவை எதிர்கொண்டாலோ, பிழை பிடிபட்டால், மீதமுள்ள அட்டவணை இன்னும் வழங்கப்படுவதை இது உறுதி செய்கிறது. பயன்படுத்தி பிழைகள் பதிவு செய்யப்பட்டுள்ளன , இது பிழைத்திருத்த நோக்கங்களுக்கு உதவியாக இருக்கும். கூடுதலாக, பயன்பாடு மற்றும் புதிய தேதி() சரம் வடிவமைப்பு அல்லது தேதி மாற்றம் போன்ற பல்வேறு வகையான தரவு மாற்றங்களை கால்பேக்குகள் எவ்வாறு கையாள முடியும் என்பதை செயல்பாடுகள் விளக்குகின்றன.
ரியாக்டில் கால்பேக் செயல்பாடுகளைப் பயன்படுத்தி டைனமிக் தரவு மாற்றம்
இந்த அணுகுமுறை நெடுவரிசைப் பெயரின் அடிப்படையில் கால்பேக் செயல்பாடுகளை இயக்க ரியாக்டில் உள்ள ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறது. இது ஒரு அட்டவணையில் உள்ள ஒவ்வொரு வரிசைக்கும் திறமையான தரவு மாற்றத்தில் கவனம் செலுத்துகிறது, பொதுவாக Laravel போன்ற பின்-இறுதியில் இருந்து வருகிறது.
const callbacks = {name: function(value) { return value.toUpperCase(); },completed: function(value) { return value ? 'Yes' : 'No'; },created_at: function(value) { return new Date(value).toLocaleDateString(); },updated_at: function(value) { return new Date(value).toLocaleDateString(); },};export default function Row({ row }) {return (Object.keys(row).map((k, i) => {const transform = callbacks[k] || ((value) => value);return (<td key={i}>{transform(row[k])}</td>);}));}
வினையில் நிபந்தனையுடன் திரும்ப அழைப்பதற்கான தரவு மேப்பிங்
இந்த முறை ஜாவாஸ்கிரிப்ட் மற்றும் ரியாக்டைப் பயன்படுத்துகிறது, நெடுவரிசைப் பெயர்களை வெவ்வேறு உருமாற்ற செயல்பாடுகளுக்கு மேப்பிங் செய்வதன் மூலம் மட்டுப்படுத்துதலை நோக்கமாகக் கொண்டுள்ளது. பூலியன் புலங்கள் போன்ற பல நெடுவரிசைப் பெயர்களுக்கான பகிரப்பட்ட கால்பேக்குகளையும் இது ஆதரிக்கிறது.
const sharedCallback = (value) => value ? 'Yes' : 'No';const callbacks = {name: function(value) { return value.toUpperCase(); },completed: sharedCallback,banned: sharedCallback,has_uploaded: sharedCallback,created_at: function(value) { return new Date(value).toLocaleDateString(); },};export default function Row({ row }) {return (Object.keys(row).map((k, i) => {const transform = callbacks[k] || ((value) => value);return (<td key={i}>{transform(row[k])}</td>);}));}
ஃபால்பேக்குகள் மற்றும் பிழை கையாளுதலுடன் உகந்த தரவு மாற்றம்
இந்த ஸ்கிரிப்ட் ஜாவாஸ்கிரிப்ட் மற்றும் ரியாக்டைப் பயன்படுத்துகிறது, மாற்றங்கள் கிடைக்காதபோது நேர்த்தியான தோல்விகளை உறுதிசெய்ய பிழை கையாளுதலை அறிமுகப்படுத்துகிறது. இது மட்டு மறுபயன்பாடு மற்றும் செயல்திறனுக்காக உகந்ததாக உள்ளது.
const callbacks = {name: function(value) { return value.toUpperCase(); },completed: function(value) { return value ? 'Yes' : 'No'; },};export default function Row({ row }) {return (Object.keys(row).map((k, i) => {try {const transform = callbacks[k] || ((value) => value);return <td key={i}>{transform(row[k])}</td>;} catch (error) {console.error(`Error transforming column ${k}:`, error);return <td key={i}>{row[k]}</td>;}}));}
ரியாக்ட் டேபிள்களில் சிக்கலான தரவு மாற்றங்களுக்கான நிபந்தனை கால்பேக்குகளை செயல்படுத்துதல்
டைனமிக் தரவு அட்டவணைகளுடன் பணிபுரியும் போது , சவாலான ஒரு அம்சம் குறிப்பிட்ட தரவு மாற்றங்களின் தேவை. ஜாவாஸ்கிரிப்ட் கால்பேக் செயல்பாடுகளை மாறி அல்லது நெடுவரிசைப் பெயரின் அடிப்படையில் செயல்படுத்துவதே குறிக்கோள், இது தரவை நெகிழ்வாக மாற்ற அனுமதிக்கிறது. இந்த அணுகுமுறையின் ஒரு முக்கிய நன்மை என்னவென்றால், ஒவ்வொரு நெடுவரிசை மாற்றத்தின் பின்னும் உள்ள தர்க்கத்தை இது மட்டு, மீண்டும் பயன்படுத்தக்கூடியதாக மாற்றுகிறது. . இதன் பொருள், எந்தவொரு நெடுவரிசையின் நடத்தையையும் எளிமையாகப் புதுப்பிப்பதன் மூலமோ அல்லது அழைப்புப் பொருளுக்கு ஒரு செயல்பாட்டைச் சேர்ப்பதன் மூலமோ எளிதாக மாற்றலாம்.
இந்த சிக்கலின் மிகவும் சிக்கலான அம்சம் பகிரப்பட்ட மாற்றங்களைக் கையாளுவதாகும். உதாரணமாக, பல நெடுவரிசைகள் பூலியன் மதிப்புகளைக் குறிக்கலாம் (எ.கா., "முழுமைப்படுத்தப்பட்டது," "தடைசெய்யப்பட்டது," "உள்ளது_பதிவேற்றப்பட்டது"). குறியீட்டைத் திரும்பத் திரும்பச் சொல்வதற்குப் பதிலாக, இந்த நிகழ்வுகளுக்குப் பகிரப்பட்ட கால்பேக் செயல்பாடுகளைப் பயன்படுத்தலாம், பராமரிப்பை மேம்படுத்தலாம். உங்கள் கோட்பேஸைப் பெருக்காமல், ஒரே மாதிரியான தரவு வகைகளில் மாற்றங்கள் சீரானதாகவும், அளவிடக்கூடியதாகவும் இருப்பதை உறுதிசெய்ய இது ஒரு சக்திவாய்ந்த வழியாகும். ஒவ்வொரு ஒத்த புலத்திற்கும் நீங்கள் தேவையற்ற குறியீட்டை எழுதாததால் இது மிகவும் திறமையானது.
கருத்தில் கொள்ள வேண்டிய மற்றொரு முக்கிய அம்சம் பிழை கையாளுதலின் பயன்பாடு ஆகும். இந்த வகை டைனமிக் அமைப்பில், சாத்தியமான பிழைகளை அழகாகக் கையாள்வது முக்கியம். நீங்கள் ஒரு பயன்படுத்தலாம் மாற்றத்தை செயல்படுத்தும் போது எதிர்பாராத பிழைகளை பிடிக்க தடுக்கவும். மாற்றம் தோல்வியுற்றாலும் அட்டவணை தொடர்ந்து ரெண்டரிங் செய்வதை உறுதிசெய்கிறது, சிறந்த பயனர் அனுபவத்தை வழங்குகிறது. மேலும், பிழை விவரங்களைப் பதிவுசெய்வது டெவலப்பர்களுக்கு விரைவாகக் கண்டறிந்து சிக்கல்களைத் தீர்க்க உதவுகிறது, பிழைத்திருத்தத்தை எளிதாக்குகிறது.
- நெடுவரிசைப் பெயரின் அடிப்படையில் திரும்ப அழைப்பதற்கான செயல்பாடுகளை டைனமிக் முறையில் எவ்வாறு ஒதுக்குவது?
- நீங்கள் ஒரு பொருளை உருவாக்கலாம் நெடுவரிசைப் பெயர்களுக்கு வரைபடமாக்கப்பட்டது. பயன்படுத்தவும் ஒவ்வொரு நெடுவரிசையிலும் திரும்பத் திரும்பச் சொல்லவும், அதனுடன் தொடர்புடைய அழைப்பைப் பயன்படுத்தவும்.
- பல நெடுவரிசைகளுக்கு ஒரு கால்பேக்கைப் பயன்படுத்தலாமா?
- ஆம், நீங்கள் பகிர்வை உருவாக்கலாம் உங்கள் கால்பேக் பொருளில் உள்ள வெவ்வேறு நெடுவரிசை பெயர்களுக்கு ஒரே செயல்பாட்டை ஒதுக்குவதன் மூலம் பல நெடுவரிசைகளுக்கு.
- ஒரு குறிப்பிட்ட நெடுவரிசைக்கு ஒரு கால்பேக் கிடைக்கவில்லை என்றால் என்ன நடக்கும்?
- வழக்கில் இல்லை ஒரு நெடுவரிசைக்கு வரையறுக்கப்பட்டுள்ளது, நீங்கள் பயன்படுத்தலாம் ஆபரேட்டர் ஒரு இயல்புநிலை மாற்றத்தை வழங்க, அட்டவணை இன்னும் தரவைக் காண்பிக்கும்.
- தேதி புலங்களை டைனமிக் முறையில் எப்படி வடிவமைக்க முடியும்?
- தேதி புலங்களுக்கு, நீங்கள் பயன்படுத்தலாம் சரங்களை தேதி பொருள்களாக மாற்ற, பின்னர் பயன்படுத்தவும் காட்சிக்கான தேதியை வடிவமைக்க.
- திரும்ப அழைப்பின் போது பிழைகளை எவ்வாறு கையாள்வது?
- ஒரு பயன்படுத்தி உங்கள் திரும்ப அழைப்பைச் செயல்படுத்துவதைத் தடுப்பது ஏதேனும் பிழைகள் பிடிபடுவதை உறுதிசெய்கிறது, மேலும் இந்தப் பிழைகளை நீங்கள் பதிவு செய்யலாம் பிழைத்திருத்தத்திற்கு உதவ.
தரவு மாற்றங்களைக் கையாளுதல் ஜாவாஸ்கிரிப்ட் கால்பேக்குகளைப் பயன்படுத்தி அட்டவணைகள் ஒரு சக்திவாய்ந்த நுட்பமாகும். பின்-இறுதியில் இருந்து டைனமிக் தரவை நிர்வகிக்க இது உங்களை அனுமதிக்கிறது திறமையாக. அந்தந்த கால்பேக் செயல்பாடுகளுக்கு நெடுவரிசைகளை மேப்பிங் செய்வதன் மூலம், தனிப்பட்ட மாற்றங்களை ஹார்ட்கோடிங் செய்யாமல் ஒவ்வொரு தரவுத் துண்டும் எவ்வாறு காட்டப்படும் என்பதை நீங்கள் தனிப்பயனாக்கலாம்.
பூலியன் மதிப்புகள் போன்ற ஒத்த தரவு வகைகளுக்கு பகிரப்பட்ட கால்பேக் செயல்பாடுகளைப் பயன்படுத்துவது குறியீட்டின் மறுபயன்பாடு மற்றும் பராமரிப்பை மேம்படுத்துகிறது. டிரை...கேட்ச் பிளாக்குகளைக் கையாள்வதில் பிழை, மாற்றம் தோல்வியடைந்தாலும் பயனர் அனுபவம் சீராக இருப்பதை உறுதிசெய்கிறது.
- டைனமிக் டேட்டா கையாளுதலுக்காக ReactJS இல் உள்ள சிறந்த நடைமுறைகளின் அடிப்படையில் இந்தக் கட்டுரை உருவாக்கப்பட்டது. உத்தியோகபூர்வ ஆவணத்தில் ரியாக்ட் என்பதில் நீங்கள் திரும்ப அழைக்கும் செயல்பாடுகளைப் பற்றி மேலும் அறியலாம்: ReactJS அதிகாரப்பூர்வ ஆவணம் .
- Laravel இலிருந்து தரவை நிர்வகிப்பதற்கும் அதை எதிர்வினையாக மாற்றுவதற்கும், Laravel ஆவணத்தைப் பார்க்கவும்: Laravel அதிகாரப்பூர்வ ஆவணம் .
- பயன்பாட்டிற்கான பொதுவான வழிகாட்டுதல் Array.prototype.map() மற்றும் பிற JavaScript வரிசை முறைகளை Mozilla Developer Network (MDN) இல் காணலாம்.