การใช้งาน State ใน React

ลองใช้ฟังก์ชัน useState เพื่อ สร้าง state ที่เก็บชื่อผลิตภัณฑ์:

const state = useState('prod');

ผลลัพธ์คือ ค่าคงที่ state จะ เป็นอาเรย์ โดยที่องค์ประกอบแรก จะเก็บชื่อผลิตภัณฑ์ และในองค์ประกอบที่สอง - ฟังก์ชันสำหรับเปลี่ยนชื่อ:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

เพื่อความกระชับ โดยทั่วไปมักจะไม่ใช้ตัวแปรกลาง สำหรับอาเรย์ แต่จะใช้ การแยกโครงสร้าง (destructuring):

const [name, setName] = useState('prod');

ตอนนี้มาลองแสดง state ของเรา ที่มีชื่อ ผลิตภัณฑ์ในรูปแบบ markup กัน:

return <p>
	<span>{name}</span>
</p>;

ลองรวบรวมทั้งหมดเข้าด้วยกันแล้วจะได้โค้ดดังนี้:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

ถ้าเราเรียกใช้โค้ดนี้ ตอนแรกใน div จะแสดงค่าเริ่มต้นของ state ในกรณีของเราคือ 'prod' เมื่อมีการเปลี่ยน state ผ่านฟังก์ชัน setName ค่าใหม่ของ state ก็จะ ปรากฏใน markup โดยอัตโนมัติ

สมมติว่าคุณต้องการแสดงข้อมูล ผู้ใช้บนหน้าจอ: ชื่อ นามสกุล และอายุ ให้คุณสร้าง state ที่สอดคล้องกับข้อมูลเหล่านี้ พร้อมค่าเริ่มต้น