Як використовувати змінну для динамічного запуску функції зворотного виклику в React

Перетворення даних у рядках таблиці React за допомогою динамічних зворотних викликів

При побудові динамічної таблиці в Реагувати, особливо під час інтеграції даних із серверної системи, наприклад Laravel, обробка перетворень даних стає ключовим завданням. Часто вам потрібно змінити або відформатувати необроблені дані, перш ніж відображати їх користувачеві. Це особливо вірно, коли дані містять логічні значення, дати чи інші типи, які потребують спеціального форматування.

У цьому сценарії ми маємо набір стовпців, переданих із серверної частини Laravel, які нам потрібно повторити та створити заголовки таблиць у React. Кожен стовпець може представляти різні типи даних, а деякі можуть вимагати перетворення. Наприклад, логічні значення, що зберігаються як TinyInt, мають відображатися як «Так» або «Ні», залежно від того, яке значення дорівнює 1 чи 0.

Динамічно виконуючи функцію зворотного виклику JavaScript на основі імені стовпця, ми можемо ефективно форматувати дані в кожному рядку. Цей підхід забезпечує гнучкість, особливо коли різні стовпці потребують різних перетворень. Структура компонентів React дозволяє легко перебирати дані та динамічно застосовувати ці перетворення.

У цій статті ми розповімо, як зіставити назви стовпців із відповідними функціями зворотного виклику. Це дозволить вам плавно трансформувати дані у вашому Реагувати незалежно від того, обробляєте ви логічні значення, дати чи інші спеціальні типи даних.

Динамічне виконання зворотних викликів у таблицях React

Наведені вище приклади сценаріїв зосереджені на динамічному виконанні a Зворотний виклик JavaScript функція на основі змінної, яка в даному випадку є назвою стовпця рядка в таблиці. Основна проблема полягає в перетворенні даних із серверної частини Laravel до того, як вони відобразяться в таблиці React. Це корисно у випадках, коли дані потрібно змінити, наприклад, перетворити логічні значення на читабельні мітки, як-от «Так» або «Ні». Використовуючи функції зворотного виклику для кожного стовпця, дані рядків таблиці можна динамічно коригувати без необхідності жорсткого кодування перетворень для кожного поля.

Одним із ключових понять є використання Object.keys(), що дозволяє нам витягувати всі назви стовпців із даних рядка. Ця функція допомагає повторювати кожен стовпець, щоб ми могли застосувати відповідне перетворення через функцію зворотного виклику. The map() метод є ще однією важливою частиною цього процесу, що дозволяє нам пройти через кожен ключ і виконати відповідну функцію перетворення, збережену в об’єкті зворотних викликів. The Логічне АБО Оператор (||) гарантує, що навіть якщо стовпець не має певного перетворення, типовою дією буде повернення необроблених даних.

Наприклад, стовпець «виконано» може містити 1 або 0, що означає, чи виконано завдання чи ні. Сценарій використовує зворотний виклик для стовпця "завершено", який перевіряє, чи значення істинне (1) чи хибне (0), а потім повертає "Так" або "Ні". Це можна легко поширити на інші логічні поля, створивши спільні функції зворотного виклику, як-от «active» для кількох стовпців, наприклад «banned» або «has_uploaded». Це забезпечує гнучкість і можливість повторного використання коду без дублювання подібної логіки для кожного поля.

Сценарій також включає обробку помилок за допомогою спробувати...спіймати. Це гарантує, що в разі збою функції зворотного виклику або виявлення неочікуваних даних помилка буде виявлена, а решта таблиці все одно відтвориться. Помилки реєструються за допомогою console.error(), що корисно для цілей налагодження. Крім того, використання toUpperCase() і нова дата() Функції демонструють, як зворотні виклики можуть обробляти різні типи перетворень даних, такі як форматування рядка або перетворення дати.

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

Виконання умовних зворотних викликів для складних перетворень даних у таблицях React

При роботі з динамічними таблицями даних в Реагувати, одним з аспектів, який може бути складним, є потреба в певних перетвореннях даних. Мета полягає в тому, щоб виконати функції зворотного виклику JavaScript на основі назви змінної або стовпця, дозволяючи вам гнучко перетворювати дані. Однією з ключових переваг цього підходу є те, що він абстрагує логіку трансформації кожного стовпця в модульну, багаторазову функції зворотного виклику. Це означає, що ви можете легко змінити поведінку будь-якого стовпця, просто оновивши або додавши функцію до об’єкта зворотного виклику.

Більш складним аспектом цієї проблеми є обробка спільних перетворень. Наприклад, кілька стовпців можуть представляти логічні значення (наприклад, "completed", "banned", "has_uploaded"). Замість повторення коду для цих випадків можна використовувати спільні функції зворотного виклику, покращуючи зручність обслуговування. Це потужний спосіб переконатися, що перетворення є узгодженими та масштабованими для подібних типів даних без роздування кодової бази. Це також ефективніше, оскільки ви не пишете зайвий код для кожного подібного поля.

Ще один важливий момент, який слід враховувати, це використання обробки помилок. У цьому типі динамічних налаштувань дуже важливо акуратно впоратися з потенційними помилками. Ви можете використовувати a спробувати...спіймати блок для виявлення будь-яких неочікуваних помилок під час виконання перетворення. Це гарантує, що таблиця продовжує рендеринг навіть у разі помилки перетворення, забезпечуючи кращу взаємодію з користувачем. Крім того, реєстрація подробиць про помилки допомагає розробникам швидко виявляти та вирішувати проблеми, полегшуючи налагодження.