การอัปเดต Context ใน React

ในบทเรียนนี้เราจะพิจารณาการอัปเดต คอมโพเนนต์เมื่อค่าของ Context เปลี่ยนแปลง สมมติว่าคุณต้องการให้ Context เปลี่ยนค่าได้

ในกรณีนี้ การใช้ Context ร่วมกับ state จะเป็นประโยชน์ ลองมา ปรับแอปพลิเคชันกล่องของเรา ที่เราทำในบทเรียนที่แล้วเล็กน้อย แล้วทำให้เมื่อคลิกที่ปุ่ม ค่าที่ส่งจะเปลี่ยนเป็น 'metal box :)'

เอาล่ะ มาดูที่ไฟล์ App ของเรา แล้วหลังจาก BigBox ให้วาดปุ่ม:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

ต่อไป นำเข้า Hook useState และสร้าง state name ซึ่งค่าของมันจะ เปลี่ยนเมื่อคลิกปุ่ม กำหนดค่าเริ่มต้น ให้เป็นค่าที่เราส่งผ่าน Context ทันที นั่นคือ 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

คราวนี้ เราจะส่ง state name ผ่าน Context แทนที่จะเป็นสตริง:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

ขั้นตอนสุดท้าย เราจะเรียก ตัวจัดการการคลิกปุ่ม และใช้ฟังก์ชัน setName กำหนดค่าใหม่ ให้ state เป็น 'metal box :)' หลังจากนั้นก็สามารถคลิก ที่ปุ่มและตรวจสอบผลลัพธ์ได้:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

ใช้แอปพลิเคชันที่คุณสร้างขึ้น ในการแก้ไขปัญหาจากบทเรียนที่แล้ว สร้าง state age ซึ่งคุณจะ ส่งผ่าน Context จาก App แทนตัวเลข กำหนดค่าเริ่มต้นเป็น 50 เพิ่มปุ่มใต้คอมโพเนนต์ Parent ใน App โดยที่ ทุกครั้งที่คลิกที่ปุ่ม ค่า state age จะลดลง 2