Cara Menggunakan Variabel untuk Menjalankan Fungsi Callback Secara Dinamis di React

Mengubah Data di Baris Tabel React dengan Panggilan Balik Dinamis

Saat membuat tabel dinamis di Bereaksi, terutama saat mengintegrasikan data dari back-end Laravel, menangani transformasi data menjadi tugas utama. Seringkali, Anda perlu mengubah atau memformat data mentah sebelum menampilkannya kepada pengguna. Hal ini terutama berlaku bila data berisi nilai Boolean, tanggal, atau tipe lain yang memerlukan format khusus.

Dalam skenario ini, kita memiliki sekumpulan kolom yang diteruskan dari back-end Laravel yang perlu kita ulangi dan buat header tabel di React. Setiap kolom mungkin mewakili tipe data yang berbeda, dan beberapa mungkin memerlukan transformasi. Misalnya, nilai Boolean yang disimpan sebagai TinyInt perlu ditampilkan sebagai "Ya" atau "Tidak", bergantung pada apakah nilainya 1 atau 0.

Dengan menjalankan fungsi panggilan balik JavaScript secara dinamis berdasarkan nama kolom, kita dapat memformat data di setiap baris secara efisien. Pendekatan ini memungkinkan adanya fleksibilitas, terutama ketika kolom yang berbeda memerlukan transformasi yang berbeda. Struktur komponen React memudahkan untuk melakukan iterasi pada data dan menerapkan transformasi ini secara dinamis.

Dalam artikel ini, kita akan membahas cara memetakan nama kolom ke fungsi panggilan balik yang sesuai. Ini akan memungkinkan Anda mengubah data dengan lancar di dalam Anda Bereaksi tabel, baik Anda menangani Boolean, tanggal, atau tipe data khusus lainnya.

Eksekusi Callback Dinamis di Tabel React

Contoh skrip di atas fokus pada eksekusi dinamis a Panggilan balik JavaScript berfungsi berdasarkan suatu variabel, yang dalam hal ini adalah nama kolom suatu baris dalam suatu tabel. Masalah utamanya adalah mengubah data dari back-end Laravel sebelum ditampilkan di tabel React. Hal ini berguna ketika data perlu diubah—seperti mengubah nilai Boolean menjadi label yang dapat dibaca seperti "Ya" atau "Tidak". Dengan menggunakan fungsi panggilan balik untuk setiap kolom, data baris tabel dapat disesuaikan secara dinamis tanpa harus melakukan transformasi hardcode untuk setiap bidang.

Salah satu konsep kuncinya adalah penggunaan Objek.kunci(), yang memungkinkan kita mengekstrak semua nama kolom dari data baris. Fungsi ini membantu melakukan iterasi pada setiap kolom sehingga kita dapat menerapkan transformasi yang relevan melalui fungsi callback. Itu peta() metode adalah bagian penting lainnya dari proses ini, memungkinkan kita menelusuri setiap kunci dan menjalankan fungsi transformasi terkait yang disimpan dalam objek callbacks. Itu Logis ATAU operator (||) memastikan bahwa meskipun kolom tidak memiliki transformasi spesifik, tindakan defaultnya adalah mengembalikan data mentah.

Misalnya, kolom "selesai" mungkin berisi angka 1 atau 0, yang menunjukkan apakah suatu tugas telah diselesaikan atau belum. Skrip menggunakan panggilan balik untuk kolom "selesai" yang memeriksa apakah nilainya benar (1) atau salah (0), lalu mengembalikan "Ya" atau "Tidak". Ini dapat dengan mudah diperluas ke bidang Boolean lainnya dengan membuat fungsi panggilan balik bersama seperti "aktif" untuk beberapa kolom, seperti "dilarang" atau "has_uploaded". Ini memastikan fleksibilitas dan penggunaan kembali kode tanpa menduplikasi logika serupa untuk setiap bidang.

Skrip ini juga menyertakan penanganan kesalahan menggunakan coba...tangkap. Hal ini memastikan bahwa jika fungsi panggilan balik gagal atau menemukan data yang tidak diharapkan, kesalahan akan tertangkap, dan sisa tabel masih dirender. Kesalahan dicatat menggunakan konsol.kesalahan(), yang berguna untuk tujuan debugging. Selain itu, penggunaan ke Huruf Besar() Dan Tanggal baru() fungsi menunjukkan bagaimana callback dapat menangani berbagai jenis transformasi data, seperti pemformatan string atau konversi tanggal.

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

Menjalankan Callback Bersyarat untuk Transformasi Data Kompleks di Tabel React

Saat bekerja dengan tabel data dinamis di Bereaksi, salah satu aspek yang mungkin menjadi tantangan adalah kebutuhan akan transformasi data yang spesifik. Tujuannya adalah untuk menjalankan fungsi panggilan balik JavaScript berdasarkan nama variabel atau kolom, memungkinkan Anda mengubah data secara fleksibel. Salah satu manfaat utama dari pendekatan ini adalah mengabstraksi logika di balik setiap transformasi kolom menjadi modular dan dapat digunakan kembali fungsi panggilan balik. Ini berarti Anda dapat dengan mudah mengubah perilaku kolom mana pun hanya dengan memperbarui atau menambahkan fungsi ke objek panggilan balik.

Aspek yang lebih kompleks dari masalah ini adalah penanganan transformasi bersama. Misalnya, beberapa kolom mungkin mewakili nilai Boolean (misalnya, "selesai", "dilarang", "telah_diunggah"). Daripada mengulangi kode, fungsi callback bersama dapat digunakan untuk kasus ini, sehingga meningkatkan kemudahan pemeliharaan. Ini adalah cara ampuh untuk memastikan bahwa transformasi konsisten dan dapat diskalakan di seluruh tipe data serupa tanpa membuat basis kode Anda membengkak. Ini juga lebih efisien karena Anda tidak menulis kode berlebihan untuk setiap bidang serupa.

Hal penting lainnya yang perlu dipertimbangkan adalah penggunaan penanganan kesalahan. Dalam jenis penyiapan dinamis ini, sangat penting untuk menangani potensi kesalahan dengan baik. Anda dapat menggunakan a coba...tangkap blok untuk menangkap kesalahan tak terduga selama pelaksanaan transformasi. Hal ini memastikan bahwa tabel terus dirender bahkan ketika transformasi gagal, sehingga memberikan pengalaman pengguna yang lebih baik. Selain itu, mencatat detail kesalahan membantu pengembang dengan cepat mengidentifikasi dan menyelesaikan masalah, sehingga proses debug menjadi lebih mudah.