สอนการใช้ React ในการจัดการข้อมูล CRUD บน Parse Server

บทเรียน crud ด้วย react บทนำ การจัดเก็บข้อมูลบน parse ถูกสร้างขึ้นรอบๆ parse object parse object คลาส แต่ละ parse object parse object ประกอบด้วยคู่คีย์ ค่า ของข้อมูลที่เข้ากันได้กับ json ข้อมูลนี้ไม่มีสคีมา ซึ่งหมายความว่าคุณไม่จำเป็นต้องระบุล่วงหน้าว่าคีย์ใดมีอยู่ในแต่ละ parse object parse object คุณสามารถตั้งค่าคู่คีย์ ค่าที่คุณต้องการได้ และแบ็คเอนด์ของเราจะจัดเก็บมัน คุณยังสามารถระบุประเภทข้อมูลตามความต้องการของแอปพลิเคชันของคุณและเก็บประเภทต่างๆ เช่น หมายเลข หมายเลข , บูลีน บูลีน , สตริง สตริง , วันที่และเวลา วันที่และเวลา , รายการ รายการ , geopointers geopointers , และ อ็อบเจ็กต์ อ็อบเจ็กต์ , โดยเข้ารหัสเป็น json ก่อนที่จะบันทึก parse ยังสนับสนุนการจัดเก็บและการค้นหาข้อมูลเชิงสัมพันธ์โดยใช้ประเภท pointers pointers และ ความสัมพันธ์ ความสัมพันธ์ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการดำเนินการข้อมูลพื้นฐานผ่านแอปตัวอย่าง crud ซึ่งจะแสดงให้คุณเห็นวิธีการสร้าง อ่าน อัปเดต และลบข้อมูลจากฐานข้อมูลเซิร์ฟเวอร์ parse ของคุณใน react คุณจะเริ่มต้นด้วยการสร้างฟังก์ชันคอมโพเนนต์สำหรับแต่ละการดำเนินการ crud โดยใช้มันในเลย์เอาต์หน้าจอที่สมบูรณ์ ซึ่งจะส่งผลให้เกิดแอปรายการที่ต้องทำ ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react ที่สร้างขึ้นและ https //www back4app com/docs/react/quickstart หากคุณต้องการทดสอบ/ใช้เลย์เอาต์หน้าจอที่จัดเตรียมโดยคู่มือนี้ คุณควรตั้งค่า ant design ant design https //ant design/docs/react/introduce เป้าหมาย เพื่อสร้างแอปพลิเคชัน crud เบื้องต้นใน react โดยใช้ parse 1 การสร้างวัตถุข้อมูล ขั้นตอนแรกในการจัดการข้อมูลของคุณในฐานข้อมูล parse คือการมีข้อมูลบางอย่างในนั้น มาสร้าง createtodo createtodo ฟังก์ชันที่จะสร้างอินสแตนซ์ใหม่ของ parse object parse object โดยใช้ซับคลาส “todo” รายการที่ต้องทำจะมีชื่อเรื่อง ( string string ) ที่อธิบายงานและฟิลด์ done( boolean boolean ) ที่บ่งบอกว่างานเสร็จสมบูรณ์หรือไม่ javascript 1 const createtodo = async function () { 2 // this value comes from a state variable 3 const newtodotitlevalue = newtodotitle; 4 // creates a new todo parse object instance 5 let todo = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the to do values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert('success! to do created!'); 13 // refresh to dos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error) { 17 // error can be caused by lack of internet connection 18 alert(`error! ${error message}`); 19 return false; 20 }; 21 };1 const createtodo = async function () promise\<boolean> { 2 // this value comes from a state variable 3 const newtodotitlevalue string = newtodotitle; 4 // creates a new todo parse object instance 5 let todo parse object = new parse object('todo'); 6 todo set('title', newtodotitlevalue); 7 todo set('done', false); 8 // after setting the to do values, save it on the server 9 try { 10 await todo save(); 11 // success 12 alert('success! to do created!'); 13 // refresh to dos list to show the new one (you will create this function later) 14 readtodos(); 15 return true; 16 } catch (error any) { 17 // error can be caused by lack of internet connection 18 alert(`error! ${error message}`); 19 return false; 20 }; 21 }; โปรดทราบว่าหากฐานข้อมูลของคุณยังไม่มี todo todo ตาราง (หรือซับคลาส) ในขณะนี้ parse จะสร้างมันโดยอัตโนมัติและยังเพิ่มคอลัมน์ใด ๆ ที่ตั้งไว้ภายใน parse object parse object อินสแตนซ์โดยใช้ parse object set() parse object set() เมธอด ซึ่งรับพารามิเตอร์สองตัว ชื่อฟิลด์และค่าที่จะตั้ง 2 การอ่านวัตถุข้อมูล หลังจากสร้างข้อมูลบางอย่างในฐานข้อมูลของคุณ แอปพลิเคชันของคุณสามารถอ่านข้อมูลจากเซิร์ฟเวอร์และแสดงให้ผู้ใช้เห็นได้แล้ว ไปข้างหน้าและสร้าง readtodos readtodos ฟังก์ชัน ซึ่งจะทำการ parse query parse query , โดยเก็บผลลัพธ์ไว้ในตัวแปรสถานะ javascript 1 const readtodos = async function () { 2 // reading parse objects is done by using parse query 3 const parsequery = new parse query('todo'); 4 try { 5 let todos = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error) { 11 // error can be caused by lack of internet connection 12 alert(`error! ${error message}`); 13 return false; 14 }; 15 };1 const readtodos = async function () promise\<boolean> { 2 // reading parse objects is done by using parse query 3 const parsequery parse query = new parse query('todo'); 4 try { 5 let todos parse object\[] = await parsequery find(); 6 // be aware that empty or invalid queries return as an empty array 7 // set results to state variable 8 setreadresults(todos); 9 return true; 10 } catch (error any) { 11 // error can be caused by lack of internet connection 12 alert(`error! ${error message}`); 13 return false; 14 }; 15 }; สามารถใช้ข้อจำกัดและการจัดเรียงหลายอย่างกับคำถามของคุณโดยใช้ parse query parse query คลาส แต่ตอนนี้เราจะยึดติดกับคำถามที่ง่ายนี้ ซึ่งจะดึงวัตถุ todo todo ที่บันทึกไว้ทั้งหมด 3 การอัปเดตวัตถุข้อมูล การอัปเดต parse object parse object อินสแตนซ์นั้นมีความคล้ายคลึงกับการสร้างใหม่ ยกเว้นว่าในกรณีนี้คุณต้องกำหนด objectid objectid ที่สร้างขึ้นก่อนหน้านี้ให้กับมันและจากนั้นบันทึกหลังจากตั้งค่าค่าของคุณใหม่ javascript 1 const updatetodo = async function (todoid, done) { 2 // create a new todo parse object instance and set todo id 3 let todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // set new done value and save parse object changes 6 todo set('done', done); 7 try { 8 await todo save(); 9 // success 10 alert('success! to do updated!'); 11 // refresh to dos list 12 readtodos(); 13 return true; 14 } catch (error) { 15 // error can be caused by lack of internet connection 16 alert(`error! ${error message}`); 17 return false; 18 }; 19 };1 const updatetodo = async function ( 2 todoid string, 3 done boolean, 4 ) promise\<boolean> { 5 // create a new todo parse object instance and set todo id 6 let todo parse object = new parse object('todo'); 7 todo set('objectid', todoid); 8 // set new done value and save parse object changes 9 todo set('done', done); 10 try { 11 await todo save(); 12 // success 13 alert('success! to do updated!'); 14 // refresh to dos list 15 readtodos(); 16 return true; 17 } catch (error any) { 18 // error can be caused by lack of internet connection 19 alert(`error! ${error message}`); 20 return false; 21 }; 22 }; เนื่องจากแอปตัวอย่างนี้แสดงถึงรายการที่ต้องทำ ฟังก์ชันการอัปเดตของคุณจะมีอาร์กิวเมนต์เพิ่มเติมคือ done done ซึ่งจะแสดงว่าหน้าที่เฉพาะนั้นเสร็จสมบูรณ์หรือไม่ 4 การลบวัตถุข้อมูล ในการลบวัตถุข้อมูล คุณต้องเรียกใช้ destroy() destroy() ใน parse object parse object ตัวอย่างที่แสดงถึงมัน โปรดระมัดระวังเพราะการดำเนินการนี้ไม่สามารถย้อนกลับได้ javascript 1 const deletetodo = async function (todoid) { 2 // create a new todo parse object instance and set todo id 3 const todo = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert('success! to do deleted!'); 9 // refresh to dos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error) { 13 // error can be caused by lack of internet connection 14 alert(`error ${error message}`); 15 return false; 16 }; 17 };1 const deletetodo = async function (todoid string) promise\<boolean> { 2 // create a new todo parse object instance and set todo id 3 let todo parse object = new parse object('todo'); 4 todo set('objectid', todoid); 5 // destroy should be called to delete a parse object 6 try { 7 await todo destroy(); 8 alert('success! to do deleted!'); 9 // refresh to dos list to remove this one 10 readtodos(); 11 return true; 12 } catch (error any) { 13 // error can be caused by lack of internet connection 14 alert(`error! ${error message}`); 15 return false; 16 }; 17 }; ตอนนี้เรามาใช้ฟังก์ชันทั้งสี่นี้ในคอมโพเนนต์ที่สมบูรณ์ เพื่อให้คุณสามารถทดสอบและตรวจสอบว่าการดำเนินการ crud ทุกอย่างทำงานได้อย่างถูกต้อง 5 การใช้ crud ในคอมโพเนนต์ react นี่คือรหัสคอมโพเนนต์ทั้งหมด รวมถึงองค์ประกอบของอินเทอร์เฟซผู้ใช้ที่มีสไตล์ (ใช้ ant design ant design ) ตัวแปรสถานะ และการเรียกฟังก์ชัน crud ของคุณ คุณควรสร้างคอมโพเนนต์แยกต่างหากในไฟล์ที่ชื่อว่า todolist js/todolist tsx todolist js/todolist tsx ใน src src ไดเรกทอรีที่มีรหัสต่อไปนี้ หรือเพิ่มมันโดยตรงในไฟล์แอปพลิเคชันหลักของคุณ ( app js/app tsx app js/app tsx ) todolist js 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 import ' /app css'; 4 import { button, input, list } from 'antd'; 5 import { 6 checkoutlined, 7 closeoutlined, 8 plusoutlined, 9 redooutlined, 10 } from '@ant design/icons'; 11 12 export const todolist = () => { 13 // state variables 14 const \[readresults, setreadresults] = usestate(\[]); 15 const \[newtodotitle, setnewtodotitle] = usestate(''); 16 17 // functions used by the screen components 18 const createtodo = async function () { 19 // this value comes from a state variable 20 const newtodotitlevalue = newtodotitle; 21 // creates a new todo parse object instance 22 let todo = new parse object('todo'); 23 todo set('title', newtodotitlevalue); 24 todo set('done', false); 25 // after setting the to do values, save it on the server 26 try { 27 await todo save(); 28 // success 29 alert('success! to do created!'); 30 // refresh to dos list to show the new one (you will create this function later) 31 readtodos(); 32 return true; 33 } catch (error) { 34 // error can be caused by lack of internet connection 35 alert(`error! ${error message}`); 36 return false; 37 } 38 }; 39 40 const readtodos = async function () { 41 // reading parse objects is done by using parse query 42 const parsequery = new parse query('todo'); 43 try { 44 let todos = await parsequery find(); 45 // be aware that empty or invalid queries return as an empty array 46 // set results to state variable 47 setreadresults(todos); 48 return true; 49 } catch (error) { 50 // error can be caused by lack of internet connection 51 alert(`error! ${error message}`); 52 return false; 53 } 54 }; 55 56 const updatetodo = async function (todoid, done) { 57 // create a new to do parse object instance and set todo id 58 let todo = new parse object('todo'); 59 todo set('objectid', todoid); 60 // set new done value and save parse object changes 61 todo set('done', done); 62 try { 63 await todo save(); 64 // success 65 alert('success! to do updated!'); 66 // refresh todos list 67 readtodos(); 68 return true; 69 } catch (error) { 70 // error can be caused by lack of internet connection 71 alert(`error! ${error message}`); 72 return false; 73 } 74 }; 75 76 const deletetodo = async function (todoid) { 77 // create a new todo parse object instance and set todo id 78 let todo = new parse object('todo'); 79 todo set('objectid', todoid); 80 // destroy should be called to delete a parse object 81 try { 82 await todo destroy(); 83 alert('success! to do deleted!'); 84 // refresh to dos list to remove this one 85 readtodos(); 86 return true; 87 } catch (error) { 88 // error can be caused by lack of internet connection 89 alert(`error! ${error message}`); 90 return false; 91 } 92 }; 93 94 return ( 95 \<div> 96 \<div classname="header"> 97 \<img 98 classname="header logo" 99 alt="back4app logo" 100 src={ 101 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 102 } 103 /> 104 \<p classname="header text bold">{'react on back4app'}\</p> 105 \<p classname="header text">{'to do list'}\</p> 106 \</div> 107 \<div classname="container"> 108 \<div classname="flex between"> 109 \<h2 classname="list heading">todo list\</h2> 110 {/ to do read (refresh) button /} 111 \<button 112 type="primary" 113 shape="circle" 114 color={'#208aec'} 115 size={'default'} 116 onclick={readtodos} 117 icon={\<redooutlined />} 118 >\</button> 119 \</div> 120 \<div classname="new todo wrapper flex between"> 121 {/ todo create text input /} 122 \<input 123 value={newtodotitle} 124 onchange={(event) => setnewtodotitle(event target value)} 125 placeholder="new todo" 126 size="large" 127 /> 128 {/ todo create button /} 129 \<button 130 type="primary" 131 classname="create todo button" 132 color={'#208aec'} 133 size={'large'} 134 onclick={createtodo} 135 icon={\<plusoutlined />} 136 > 137 add 138 \</button> 139 \</div> 140 \<div> 141 {/ todo read results list /} 142 {readresults !== null && 143 readresults !== undefined && 144 readresults length > 0 && ( 145 \<list 146 datasource={readresults} 147 renderitem={(item) => ( 148 \<list item classname="todo item"> 149 \<p 150 classname={ 151 item get('done') === true 152 ? 'todo text done' 153 'todo text' 154 } 155 > 156 {item get('title')} 157 \</p> 158 \<div classname="flex row"> 159 {/ todo update button /} 160 {item get('done') !== true && ( 161 \<button 162 type="primary" 163 shape="circle" 164 classname="todo button" 165 onclick={() => updatetodo(item id, true)} 166 icon={ 167 \<checkoutlined classname="todo button icon done" /> 168 } 169 >\</button> 170 )} 171 {/ todo delete button /} 172 \<button 173 type="primary" 174 shape="circle" 175 classname="todo button" 176 onclick={() => deletetodo(item id)} 177 icon={ 178 \<closeoutlined classname="todo button icon remove" /> 179 } 180 >\</button> 181 \</div> 182 \</list item> 183 )} 184 /> 185 )} 186 \</div> 187 \</div> 188 \</div> 189 ); 190 }; todolist tsx 1 import react, { usestate, fc, reactelement } from 'react'; 2 import ' /app css'; 3 import { button, input, list } from 'antd'; 4 import { 5 checkoutlined, 6 closeoutlined, 7 plusoutlined, 8 redooutlined, 9 } from '@ant design/icons'; 10 const parse = require('parse/dist/parse min js'); 11 12 export const todolist fc<{}> = () reactelement => { 13 // state variables 14 const initialreadresults parse object\[] = \[]; 15 const \[readresults, setreadresults] = usestate(initialreadresults); 16 const \[newtodotitle, setnewtodotitle] = usestate(''); 17 18 // functions used by the screen components 19 const createtodo = async function () promise\<boolean> { 20 // this value comes from a state variable 21 const newtodotitlevalue string = newtodotitle; 22 // creates a new todo parse object instance 23 let todo parse object = new parse object('todo'); 24 todo set('title', newtodotitlevalue); 25 todo set('done', false); 26 // after setting the to do values, save it on the server 27 try { 28 await todo save(); 29 // success 30 alert('success! to do created!'); 31 // refresh to dos list to show the new one (you will create this function later) 32 readtodos(); 33 return true; 34 } catch (error any) { 35 // error can be caused by lack of internet connection 36 alert('error!' + error message); 37 return false; 38 } 39 }; 40 41 const readtodos = async function () promise\<boolean> { 42 // reading parse objects is done by using parse query 43 const parsequery parse query = new parse query('todo'); 44 try { 45 let todos parse object\[] = await parsequery find(); 46 // be aware that empty or invalid queries return as an empty array 47 // set results to state variable 48 setreadresults(todos); 49 return true; 50 } catch (error any) { 51 // error can be caused by lack of internet connection 52 alert('error!' + error message); 53 return false; 54 } 55 }; 56 57 const updatetodo = async function (todoid string, done boolean) promise\<boolean> { 58 // create a new to do parse object instance and set todo id 59 let todo parse object = new parse object('todo'); 60 todo set('objectid', todoid); 61 // set new done value and save parse object changes 62 todo set('done', done); 63 try { 64 await todo save(); 65 // success 66 alert('success! to do updated!'); 67 // refresh todos list 68 readtodos(); 69 return true; 70 } catch (error any) { 71 // error can be caused by lack of internet connection 72 alert('error!' + error message); 73 return false; 74 } 75 }; 76 77 const deletetodo = async function (todoid string) promise\<boolean> { 78 // create a new todo parse object instance and set todo id 79 let todo parse object = new parse object('todo'); 80 todo set('objectid', todoid); 81 // destroy should be called to delete a parse object 82 try { 83 await todo destroy(); 84 alert('success! to do deleted!'); 85 // refresh to dos list to remove this one 86 readtodos(); 87 return true; 88 } catch (error any) { 89 // error can be caused by lack of internet connection 90 alert('error!' + error message); 91 return false; 92 } 93 }; 94 95 return ( 96 \<div> 97 \<div classname="header"> 98 \<img 99 classname="header logo" 100 alt="back4app logo" 101 src={ 102 'https //blog back4app com/wp content/uploads/2019/05/back4app white logo 500px png' 103 } 104 /> 105 \<p classname="header text bold">{'react on back4app'}\</p> 106 \<p classname="header text">{'to do list'}\</p> 107 \</div> 108 \<div classname="container"> 109 \<div classname="flex between"> 110 \<h2 classname="list heading">todo list\</h2> 111 {/ to do read (refresh) button /} 112 \<button 113 type="primary" 114 shape="circle" 115 color={'#208aec'} 116 onclick={readtodos} 117 icon={\<redooutlined />} 118 >\</button> 119 \</div> 120 \<div classname="new todo wrapper flex between"> 121 {/ todo create text input /} 122 \<input 123 value={newtodotitle} 124 onchange={(event {target {value string}}) => setnewtodotitle(event target value)} 125 placeholder="new todo" 126 size="large" 127 /> 128 {/ todo create button /} 129 \<button 130 type="primary" 131 classname="create todo button" 132 color={'#208aec'} 133 size={'large'} 134 onclick={createtodo} 135 icon={\<plusoutlined />} 136 > 137 add 138 \</button> 139 \</div> 140 \<div> 141 {/ todo read results list /} 142 {readresults !== null && 143 readresults !== undefined && 144 readresults length > 0 && ( 145 \<list 146 datasource={readresults} 147 renderitem={(item parse object) => ( 148 \<list item classname="todo item"> 149 \<p 150 classname={ 151 item get('done') === true 152 ? 'todo text done' 153 'todo text' 154 } 155 > 156 {item get('title')} 157 \</p> 158 \<div classname="flex row"> 159 {/ todo update button /} 160 {item get('done') !== true && ( 161 \<button 162 type="primary" 163 shape="circle" 164 classname="todo button" 165 onclick={() => updatetodo(item id, true)} 166 icon={ 167 \<checkoutlined classname="todo button icon done" /> 168 } 169 >\</button> 170 )} 171 {/ todo delete button /} 172 \<button 173 type="primary" 174 shape="circle" 175 classname="todo button" 176 onclick={() => deletetodo(item id)} 177 icon={ 178 \<closeoutlined classname="todo button icon remove" /> 179 } 180 >\</button> 181 \</div> 182 \</list item> 183 )} 184 /> 185 )} 186 \</div> 187 \</div> 188 \</div> 189 ); 190 }; นอกจากนี้ ให้เพิ่มสไตล์ css เหล่านี้ที่ท้ายของ app css app css ไฟล์ 1 / / 2 / your other styles / 3 4 / back4app guide styles / 5 6 html { 7 box sizing border box; 8 outline none; 9 overflow auto; 10 } 11 12 , 13 before, 14 after { 15 margin 0; 16 padding 0; 17 box sizing inherit; 18 } 19 20 h1, 21 h2, 22 h3, 23 h4, 24 h5, 25 h6 { 26 margin 0; 27 } 28 29 p { 30 margin 0; 31 } 32 33 body { 34 margin 0; 35 background color #fff; 36 } 37 38 container { 39 width 100%; 40 max width 600px; 41 margin auto; 42 padding 20px 0; 43 } 44 45 wrapper { 46 width '90%'; 47 align self 'center'; 48 } 49 50 header { 51 align items center; 52 padding 25px 0; 53 background color #208aec; 54 } 55 56 header logo { 57 height 55px; 58 margin bottom 20px; 59 object fit contain; 60 } 61 62 header text bold { 63 margin bottom 3px; 64 color rgba(255, 255, 255, 0 9); 65 font size 16px; 66 font weight bold; 67 } 68 69 header text { 70 color rgba(255, 255, 255, 0 9); 71 font size 15px; 72 } 73 74 flex row { 75 display flex; 76 } 77 78 flex between { 79 display flex; 80 align items center; 81 justify content space between; 82 } 83 84 list heading { 85 font weight bold; 86 } 87 88 new todo wrapper { 89 margin top 20px; 90 margin bottom 10px; 91 } 92 93 new todo wrapper > input { 94 margin right 20px; 95 } 96 97 todo item { 98 border bottom width 1; 99 border bottom color 'rgba(0, 0, 0, 0 12)'; 100 } 101 102 todo text { 103 font size 15px; 104 } 105 106 todo text done { 107 color rgba(0, 0, 0, 0 3); 108 font size 15px; 109 text decoration line line through; 110 } 111 112 todo button { 113 width 32px; 114 height 32px; 115 margin left 5px; 116 background color transparent; 117 border radius 50px; 118 border none; 119 cursor pointer; 120 } 121 122 todo button\ hover, 123 todo button\ focus { 124 background color rgba(0, 0, 0, 0 1); 125 } 126 127 todo button icon done { 128 color #52c41a; 129 font size 16px; 130 } 131 132 todo button icon remove { 133 color #f5222d; 134 font size 16px; 135 } หากคอมโพเนนต์ของคุณถูกตั้งค่าอย่างถูกต้อง คุณควรเห็นสิ่งที่คล้ายกับนี้หลังจากรันแอป ไปข้างหน้าและเพิ่มรายการที่ต้องทำโดยพิมพ์ชื่อในกล่องป้อนข้อมูลทีละรายการและกดที่ เพิ่ม เพิ่ม ปุ่ม หมายเหตุว่าหลังจากการสร้างที่สำเร็จทุกครั้ง ฟังก์ชัน createtodo createtodo จะเรียกใช้ readtodos readtodos โดยอัตโนมัติ ทำให้รายการงานของคุณรีเฟรชโดยอัตโนมัติ คุณควรมีรายการที่ต้องทำที่มีขนาดใหญ่เช่นนี้ ตอนนี้คุณสามารถทำเครื่องหมายงานของคุณว่าเสร็จแล้วโดยการคลิกที่เครื่องหมายถูกข้างๆ ทำให้ค่าของมันถูกอัปเดตเป็นจริงและเปลี่ยนสถานะไอคอนทางซ้าย การดำเนินการข้อมูลที่เหลืออยู่เพียงอย่างเดียวคือการลบ ซึ่งสามารถทำได้โดยการกดที่ไอคอนถังขยะที่อยู่ทางขวาสุดของรายการที่ต้องทำของคุณ หลังจากลบวัตถุสำเร็จ คุณควรได้รับข้อความแจ้งเตือนเช่นนี้ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการดำเนินการข้อมูลพื้นฐาน (crud) ใน parse บน react ในคู่มือต่อไป เราจะแสดงให้คุณเห็นว่าประเภทข้อมูลใดบ้างที่รองรับใน parse และวิธีการใช้งาน