Sådan bruges en variabel til dynamisk at køre en tilbagekaldsfunktion i React

Transformering af data i React-tabelrækker med dynamiske tilbagekald

Når du bygger en dynamisk tabel ind Reagere, især når man integrerer data fra en back-end lignende Laravel, bliver håndtering af datatransformationer en nøgleopgave. Ofte skal du mutere eller formatere de rå data, før du viser dem til brugeren. Dette gælder især, når dataene indeholder boolske værdier, datoer eller andre typer, der kræver speciel formatering.

I dette scenarie har vi et sæt kolonner sendt fra en Laravel-backend, som vi skal gentage og bygge tabeloverskrifter i React. Hver kolonne kan repræsentere forskellige typer data, og nogle kan kræve transformation. For eksempel skal booleske værdier gemt som TinyInt vises som "Ja" eller "Nej", afhængigt af om værdien er 1 eller 0.

Ved dynamisk at udføre en JavaScript-callback-funktion baseret på kolonnenavnet, kan vi effektivt formatere dataene i hver række. Denne tilgang giver mulighed for fleksibilitet, især når forskellige kolonner har brug for forskellige transformationer. Reacts komponentstruktur gør det nemt at iterere over dataene og anvende disse transformationer dynamisk.

I denne artikel vil vi gennemgå, hvordan man kortlægger kolonnenavne til deres tilsvarende tilbagekaldsfunktioner. Dette vil give dig mulighed for at transformere data problemfrit i din Reagere tabel, uanset om du håndterer booleaner, datoer eller andre specielle typer data.

Dynamisk udførelse af tilbagekald i React-tabeller

Script-eksemplerne ovenfor fokuserer på dynamisk eksekvering af en JavaScript tilbagekald funktion baseret på en variabel, som i dette tilfælde er kolonnenavnet på en række i en tabel. Hovedproblemet er at transformere dataene fra en Laravel-backend, før de vises i React-tabellen. Dette er nyttigt i tilfælde, hvor data skal ændres - såsom at transformere booleske værdier til læsbare etiketter som "Ja" eller "Nej". Ved at bruge tilbagekaldsfunktioner for hver kolonne kan tabelrækkernes data justeres dynamisk uden at skulle hardkode transformationer for hvert felt.

Et nøglebegreb er brugen af Object.keys(), som giver os mulighed for at udtrække alle kolonnenavnene fra rækkedataene. Denne funktion hjælper med at iterere over hver kolonne, så vi kan anvende den relevante transformation gennem tilbagekaldsfunktionen. De kort() metode er en anden væsentlig del af denne proces, som giver os mulighed for at gennemgå hver tast og udføre den tilsvarende transformationsfunktion, der er gemt i tilbagekaldsobjektet. De Logisk ELLER operatør (||) sikrer, at selvom en kolonne ikke har en specifik transformation, vil standardhandlingen være at returnere de rå data.

For eksempel kan kolonnen "fuldført" indeholde et 1 eller 0, der repræsenterer, om en opgave er blevet fuldført eller ej. Scriptet bruger et tilbagekald til kolonnen "fuldført", der kontrollerer, om værdien er sand (1) eller falsk (0), og derefter returnerer "Ja" eller "Nej". Dette kan nemt udvides til andre boolske felter ved at oprette delte tilbagekaldsfunktioner som "aktiv" for flere kolonner, såsom "forbudt" eller "har_uploadet." Det sikrer fleksibilitet og genbrug i koden uden at duplikere lignende logik for hvert felt.

Scriptet inkluderer også fejlhåndtering vha prøv...fang. Dette sikrer, at hvis en tilbagekaldsfunktion fejler eller støder på uventede data, fanges fejlen, og resten af ​​tabellen gengives stadig. Fejl logges vha console.error(), hvilket er nyttigt til fejlretningsformål. Derudover er brugen af toUpperCase() og ny dato() funktioner demonstrerer, hvordan tilbagekaldene kan håndtere forskellige typer datatransformationer, såsom strengformatering eller datokonvertering.

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>;
      }
    })
  );
}

Udførelse af betingede tilbagekald for komplekse datatransformationer i reaktionstabeller

Når du arbejder med dynamiske datatabeller i Reagere, et aspekt, der kan være udfordrende, er behovet for specifikke datatransformationer. Målet er at udføre JavaScript-callback-funktioner baseret på et variabel- eller kolonnenavn, så du kan transformere data fleksibelt. En vigtig fordel ved denne tilgang er, at den abstraherer logikken bag hver kolonnetransformation til modulær, genanvendelig tilbagekaldsfunktioner. Dette betyder, at du nemt kan ændre adfærden for enhver kolonne ved blot at opdatere eller tilføje en funktion til tilbagekaldsobjektet.

Et mere komplekst aspekt af dette problem er at håndtere delte transformationer. For eksempel kan flere kolonner repræsentere booleske værdier (f.eks. "fuldført", "forbudt", "har_uploadet"). I stedet for at gentage koden, kan delte tilbagekaldsfunktioner bruges til disse tilfælde, hvilket forbedrer vedligeholdelsen. Dette er en effektiv måde at sikre, at transformationer er konsistente og skalerbare på tværs af lignende datatyper uden at din kodebase bliver oppustet. Det er også mere effektivt, da du ikke skriver redundant kode for hvert lignende felt.

Et andet vigtigt punkt at overveje er brugen af ​​fejlhåndtering. I denne type dynamisk opsætning er det afgørende at håndtere potentielle fejl elegant. Du kan bruge en prøv...fang blok for at fange eventuelle uventede fejl under udførelsen af ​​en transformation. Dette sikrer, at tabellen fortsætter med at gengive, selv når en transformation mislykkes, hvilket giver en bedre brugeroplevelse. Desuden hjælper logning af fejldetaljerne udviklere med hurtigt at identificere og løse problemer, hvilket gør fejlfinding lettere.