แบบฟอร์มสำหรับแก้ไขข้อมูลใน Redux

ตอนนี้เรามี reducer สำหรับการเปลี่ยนแปลง ข้อมูลใน store แล้ว ในบทเรียนนี้เราจะสร้าง แบบฟอร์ม ที่เราสามารถใช้เพื่อ แก้ไขข้อมูลผลิตภัณฑ์ได้

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และสร้างไฟล์ EditProductForm.jsx ในโฟลเดอร์ products การสร้างคอมโพเนนต์ EditProductForm จะคล้ายกับ NewProductForm ยกเว้นข้อแตกต่างบางประการ ที่เราจะหยุดพูดถึง ดังนั้น คัดลอกโค้ดทั้งหมดจาก NewProductForm.jsx และวางลงในไฟล์ที่สร้างไว้ EditProductForm.jsx ตอนนี้มาเริ่มตามลำดับ

นำ nanoid ออกจากส่วน import ที่นี่เราไม่ จำเป็นต้องสร้าง id แทนที่การ import productAdded ด้วย productUpdated เพราะ ที่นี่เราจะใช้ action สำหรับการอัปเดต ไม่ใช่สำหรับการเพิ่ม ผลิตภัณฑ์

ต่อไปเปลี่ยนชื่อฟังก์ชันของ คอมโพเนนต์ของเราจาก NewProductForm เป็น EditProductForm

ก่อนที่เราจะกำหนด local state ในฟังก์ชัน EditProductForm สำหรับ name, desc, price และ amount มาเพิ่มโค้ดอีกไม่กี่บรรทัด อย่างที่เราได้กล่าวไปก่อนหน้านี้ ที่นี่เราไม่จำเป็นต้องสร้าง id ตอนนี้ ภารกิจของเราได้มาจากข้อมูลของผลิตภัณฑ์ที่ต้องการเปลี่ยน เราเคยทำแบบนี้ตอนสร้าง หน้าแยกสำหรับผลิตภัณฑ์ เอาล่ะ รับ id โดยใช้ hook useParams แล้วหาผลิตภัณฑ์ที่เราต้องการ โดยใช้ hook useSelector (อย่าลืม import hook ทั้งสองที่จุดเริ่มต้นของไฟล์):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

หลังจากนั้นเปลี่ยนบล็อกที่ประกาศ local state ตอนนี้เราจำเป็นต้อง กำหนดค่าตั้งต้นจาก ข้อมูลผลิตภัณฑ์ที่ได้รับจาก store นี่คือลักษณะของ state แรก โปรดปรับเปลี่ยนอีกสามรายการที่เหลือด้วยตัวคุณเอง:

const [name, setName] = useState(product.name)

หลังจากการกำหนดตัวแปรสำหรับ useDispatch มาเพิ่มโค้ดอีกหนึ่งบรรทัด คราวนี้สำหรับ hook useNavigate เราจะ ใช้มันเพื่อกลับไปที่หน้าผลิตภัณฑ์ เมื่อผู้ใช้บันทึก การเปลี่ยนแปลงที่ทำในแบบฟอร์ม:

const navigate = useNavigate()

และอย่าลืม import hook นี้ที่จุดเริ่มต้นของไฟล์:

import { useNavigate, useParams } from 'react-router-dom'

ต่อไปเรามีตัวจัดการสำหรับ ช่องป้อนข้อมูล หลังจากนั้นเราจำเป็นต้อง ปรับฟังก์ชัน onSaveProductClick ตอนนี้ในฟังก์ชันนี้เมื่อคลิกเราจะส่ง action productUpdated พร้อมกับ id ที่ได้รับ และข้อมูลที่เปลี่ยนแปลงในรูปแบบของออบเจ็กต์ หลังจากนั้นเพิ่ม navigate ของเรา สำหรับการไปยัง หน้าผลิตภัณฑ์ที่ถูกเปลี่ยนแปลง:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

สิ่งที่เหลืออยู่คือใน JSX ที่คืนกลับมาหาบรรทัด:

<h2>Add a New Product</h2>

และแทนที่ด้วย:

<h2>Edit Product</h2>

เปิดแอปพลิเคชันนักเรียนของคุณ สร้างไฟล์ EditStudentForm.jsx โดย ทำตามวิธีเดียวกันกับ NewStudentForm.jsx นำ การเปลี่ยนแปลงเข้าไป ตามที่แสดงในบทเรียน