React Tutorial Bagian 15: Lokakarya State Komponen

Hari ini, kami sarankan Anda menyelesaikan dua kelas praktis untuk bekerja dengan keadaan komponen. Secara khusus, melakukan tugas hari ini, Anda tidak hanya dapat lebih memahami konsep properti, tetapi juga bekerja pada debugging React-aplikasi yang memiliki kesalahan.



→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus

Pelajaran 27. Workshop. Status Komponen Debugging

→ Asli

▍ pekerjaan

Analisis kode kelas App bawah ini dari file App.js dari aplikasi Bereaksi standar yang dibuat oleh create-react-app . Kode ini tidak lengkap, ia memiliki kesalahan.

 import React from "react" class App extends Component() {   return (       <div>           <h1>{this.state.name}</h1>           <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>       </div>   ) } export default App 

Komponen App berbasis kelas tidak memiliki konstruktor, kondisinya tidak diinisialisasi, tetapi ketika membentuk apa yang dikembalikan, itu menyiratkan bahwa ia memiliki keadaan dengan beberapa data.

Tugas Anda adalah membawa kode ini ke status yang dapat digunakan.

Jika Anda menemukan pesan kesalahan tertentu yang tidak Anda ketahui - jangan buru-buru mencari solusinya. Coba sendiri, misalnya, membaca kode dengan hati-hati dan mencari informasi tentang masalah di Internet, cari tahu penyebab kesalahan dan perbaiki. Kode debug adalah keterampilan berharga yang pasti Anda perlukan ketika bekerja pada proyek nyata.

OlSolusi

Tubuh kelas mirip dengan tubuh komponen fungsional. Ini hanya berisi perintah return , tetapi dalam komponen yang didasarkan pada kelas, perintah ini digunakan dalam metode render() , dan bukan di tubuh kelas. Perbaiki

 import React from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Jika kita melanjutkan analisis kode, melihat pesan-pesan kesalahan yang ditampilkan di browser, kita dapat memahami bahwa meskipun pembangunan class App extends Component terlihat cukup normal, masih ada sesuatu yang salah dengan apa yang kita sebut dengan nama Component . Masalahnya adalah bahwa dalam perintah impor, import React from "react" , kami hanya mengimpor React , tetapi bukan Component , ke dalam proyek. Artinya, kita perlu mengedit perintah ini, membawanya ke form import React, {Component} from "react" , lalu ketika membuat kelas kita dapat menggunakan kode yang ada, atau menulis ulang deklarasi kelas dalam bentuk ini: class App extends React.Component . Kami akan fokus pada opsi pertama. Sekarang kode komponen terlihat seperti ini:

 import React, {Component} from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Benar, masalahnya tidak berakhir di sana. Aplikasi tidak berfungsi, pesan kesalahan TypeError: Cannot set property 'props' of undefined muncul di browser TypeError: Cannot set property 'props' of undefined , kami diberitahu bahwa ada sesuatu yang salah dengan baris pertama dari deklarasi kelas.

Intinya di sini adalah bahwa ketika mendeklarasikan komponen, yang, seperti yang sudah kita pahami, adalah komponen yang didasarkan pada kelas, sepasang tanda kurung muncul setelah nama kelas induk. Mereka tidak diperlukan di sini, ini bukan komponen fungsional, jadi kami akan menyingkirkan mereka. Sekarang kode aplikasi ternyata lebih atau kurang bisa diterapkan, komponen yang didasarkan pada kelas tidak lagi terlihat sepenuhnya salah, tetapi sistem terus melaporkan kesalahan kepada kami. Sekarang pesan kesalahan terlihat seperti ini: TypeError: Cannot read property 'name' of null . Jelas, ini mengacu pada upaya untuk menggunakan data yang disimpan dalam status komponen yang belum diinisialisasi. Oleh karena itu, sekarang kita akan membuat konstruktor kelas tanpa lupa memanggil super() di dalamnya, dan menginisialisasi keadaan komponen dengan menambahkan nilai ke dalamnya dengan mana komponen berusaha untuk bekerja.

Berikut ini kode kerja yang sudah selesai untuk komponen App :

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           name: "Sally",           age: 13       }   }     render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Beginilah tampilan halaman aplikasi di browser.


Halaman aplikasi di browser

Pelajaran 28. Workshop. Status komponen, bekerja dengan data yang disimpan dalam status

→ Asli

Dalam sesi latihan ini, Anda akan memiliki kesempatan lain untuk bekerja dengan keadaan komponen.

▍ pekerjaan

Di bawah ini adalah kode komponen fungsional. Berdasarkan itu, lakukan hal berikut:

1. Mengubahnya sehingga komponen memiliki status.
2. Status komponen harus memiliki properti isLoggedIn , yang menyimpan nilai logis true jika pengguna login, dan false jika tidak (dalam kasus kami, tidak ada mekanisme "logon" di sini, nilai yang sesuai harus ditetapkan secara manual, ketika negara diinisialisasi).
3. Cobalah untuk memastikan bahwa jika pengguna login, komponen You are currently logged in teks You are currently logged in , dan jika tidak, teks You are currently logged out . Tugas ini bersifat opsional, jika Anda mengalami kesulitan dalam implementasinya, Anda dapat, misalnya, mencari ide di Internet.

Berikut adalah kode untuk file App.js :

 import React from "react" function App() {   return (       <div>           <h1>You are currently logged (in/out)</h1>       </div>   ) } export default App 

OlSolusi

Kami memiliki komponen fungsional yang kami miliki. Untuk melengkapinya dengan keadaan, itu harus diubah menjadi komponen berdasarkan kelas dan menginisialisasi keadaannya. Seperti apa kode komponen yang dikonversi:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       return (           <div>               <h1>You are currently logged (in/out)</h1>           </div>       )   } } export default App 

Periksa kesehatan aplikasi.


Aplikasi di browser

Bahkan, jika Anda sendiri telah mencapai titik ini, itu berarti Anda telah mempelajari materi dalam kursus yang ditujukan untuk komponen berdasarkan kelas dan status komponen. Sekarang kita akan terlibat dalam tugas opsional.

Intinya, apa yang perlu kita lakukan untuk menyelesaikan tugas ini akan dibahas dalam pelajaran yang berfokus pada rendering bersyarat, jadi di sini kita maju sedikit. Jadi, kita akan mendeklarasikan dan menginisialisasi variabel yang akan berisi string in atau out tergantung pada apa yang disimpan di isLoggedIn state. Kami akan bekerja dengan variabel ini dalam metode render() , pertama menganalisis data dan menulis nilai yang diinginkan ke dalamnya, dan kemudian menggunakannya dalam kode JSX yang dikembalikan oleh komponen. Inilah yang akhirnya kami lakukan:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       let wordDisplay       if (this.state.isLoggedIn === true) {           wordDisplay = "in"       } else {           wordDisplay = "out"       }       return (           <div>               <h1>You are currently logged {wordDisplay}</h1>           </div>       )   } } export default App 

Harap perhatikan bahwa variabel wordDisplay adalah variabel lokal biasa yang dideklarasikan dalam metode render() , oleh karena itu, untuk mengaksesnya di dalam metode ini, Anda hanya perlu menentukan namanya.

Inilah tampilan halaman aplikasi sekarang:


Halaman aplikasi di browser

isLoggedIn status isLoggedIn disetel ke true , sehingga teks You are currently logged in isLoggedIn ditampilkan di halaman. Untuk menampilkan teks You are currently logged out Anda perlu mengubah, dalam kode komponen, nilai isLoggedIn menjadi false .

Perlu dicatat bahwa masalah ini dapat diselesaikan dengan cara lain. Tetapi kode yang kami peroleh jelas dan efisien, jadi kami akan memikirkannya, meskipun, misalnya, mengingat bahwa isLoggedIn adalah variabel logis, kondisi if (this.state.isLoggedIn === true) dapat ditulis ulang seolah- if (this.state.isLoggedIn) .

Ringkasan

Hari ini Anda berlatih bekerja dengan keadaan komponen, khususnya, memperbaiki kesalahan dalam kode, memproses komponen fungsional menjadi komponen berdasarkan kelas, dan terlibat dalam rendering bersyarat. Lain kali Anda akan memiliki pekerjaan praktis lain dan topik baru.

Pembaca yang budiman! Apakah Anda berhasil menemukan dan memperbaiki sendiri semua kesalahan dengan menyelesaikan pekerjaan praktis pertama yang disajikan di sini?