Como usar uma variável para executar dinamicamente uma função de retorno de chamada no React

Transformando dados em linhas da tabela React com retornos de chamada dinâmicos

Ao construir uma tabela dinâmica em Reagir, especialmente ao integrar dados de um back-end como Laravel, lidar com transformações de dados torna-se uma tarefa fundamental. Freqüentemente, você precisará alterar ou formatar os dados brutos antes de exibi-los ao usuário. Isto é especialmente verdadeiro quando os dados contêm valores booleanos, datas ou outros tipos que necessitam de formatação especial.

Neste cenário, temos um conjunto de colunas passadas de um back-end do Laravel que precisamos iterar e construir cabeçalhos de tabela no React. Cada coluna pode representar diferentes tipos de dados e alguns podem exigir transformação. Por exemplo, os valores booleanos armazenados como TinyInt precisam ser exibidos como “Sim” ou “Não”, dependendo se o valor é 1 ou 0.

Ao executar dinamicamente uma função de retorno de chamada JavaScript com base no nome da coluna, podemos formatar com eficiência os dados em cada linha. Essa abordagem permite flexibilidade, especialmente quando colunas diferentes precisam de transformações diferentes. A estrutura de componentes do React simplifica a iteração dos dados e a aplicação dessas transformações dinamicamente.

Neste artigo, veremos como mapear nomes de colunas para suas funções de retorno de chamada correspondentes. Isso permitirá que você transforme os dados perfeitamente dentro do seu Reagir tabela, quer você esteja lidando com booleanos, datas ou outros tipos especiais de dados.

Execução dinâmica de retornos de chamada em tabelas React

Os exemplos de script acima focam na execução dinâmica de um Retorno de chamada JavaScript função baseada em uma variável, que neste caso é o nome da coluna de uma linha em uma tabela. O principal problema é transformar os dados de um backend Laravel antes de serem exibidos na tabela React. Isso é útil para casos em que os dados precisam ser modificados — como transformar valores booleanos em rótulos legíveis como “Sim” ou “Não”. Ao usar funções de retorno de chamada para cada coluna, os dados das linhas da tabela podem ser ajustados dinamicamente sem a necessidade de codificar transformações para cada campo.

Um conceito chave é o uso de Object.keys(), o que nos permite extrair todos os nomes de colunas dos dados de linha. Esta função ajuda a iterar cada coluna para que possamos aplicar a transformação relevante por meio da função de retorno de chamada. O mapa() O método é outra parte essencial deste processo, permitindo-nos passar por cada chave e executar a função de transformação correspondente armazenada no objeto callbacks. O OU lógico O operador (||) garante que mesmo que uma coluna não tenha uma transformação específica, a ação padrão será retornar os dados brutos.

Por exemplo, a coluna "concluída" pode conter 1 ou 0, representando se uma tarefa foi concluída ou não. O script usa um retorno de chamada para a coluna “concluído” que verifica se o valor é verdadeiro (1) ou falso (0) e retorna “Sim” ou “Não”. Isso pode ser facilmente estendido para outros campos booleanos criando funções de retorno de chamada compartilhadas como "ativo" para múltiplas colunas, como "banido" ou "has_uploaded". Garante flexibilidade e reutilização no código sem duplicar lógica semelhante para cada campo.

O script também inclui tratamento de erros usando tente...pegue. Isso garante que, se uma função de retorno de chamada falhar ou encontrar dados inesperados, o erro será detectado e o restante da tabela ainda será renderizado. Os erros são registrados usando console.error(), o que é útil para fins de depuração. Além disso, o uso de paraUpperCase() e nova data() funções demonstra como os retornos de chamada podem lidar com vários tipos de transformações de dados, como formatação de string ou conversão de data.

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

Executando retornos de chamada condicionais para transformações de dados complexos em tabelas React

Ao trabalhar com tabelas de dados dinâmicas em Reagir, um aspecto que pode ser desafiador é a necessidade de transformações específicas de dados. O objetivo é executar funções de retorno de chamada JavaScript com base em uma variável ou nome de coluna, permitindo transformar dados de maneira flexível. Um dos principais benefícios dessa abordagem é que ela abstrai a lógica por trás da transformação de cada coluna em uma estrutura modular e reutilizável. funções de retorno de chamada. Isso significa que você pode alterar facilmente o comportamento de qualquer coluna simplesmente atualizando ou adicionando uma função ao objeto de retorno de chamada.

Um aspecto mais complexo deste problema é o tratamento de transformações compartilhadas. Por exemplo, múltiplas colunas podem representar valores booleanos (por exemplo, "concluído", "banido", "has_uploaded"). Em vez de repetir o código, funções de retorno de chamada compartilhadas podem ser usadas para esses casos, melhorando a capacidade de manutenção. Essa é uma maneira poderosa de garantir que as transformações sejam consistentes e escalonáveis ​​em tipos de dados semelhantes, sem sobrecarregar sua base de código. Também é mais eficiente, pois você não escreve código redundante para todos os campos semelhantes.

Outro ponto essencial a considerar é o uso do tratamento de erros. Nesse tipo de configuração dinâmica, é crucial lidar com possíveis erros com elegância. Você pode usar um tente...pegue bloco para capturar quaisquer erros inesperados durante a execução de uma transformação. Isso garante que a tabela continue sendo renderizada mesmo quando uma transformação falhar, proporcionando uma melhor experiência ao usuário. Além disso, registrar os detalhes do erro ajuda os desenvolvedores a identificar e resolver problemas rapidamente, facilitando a depuração.