สมมติว่าฉันมีรายการวัตถุธรรมดาอยู่ในthis.state.listนั้นฉันสามารถใช้เพื่อแสดงรายการเด็กได้ แล้ววิธีที่ถูกต้องในการแทรกวัตถุthis.state.listคืออะไร?
ด้านล่างนี้เป็นวิธีเดียวที่ฉันคิดว่ามันใช้ได้เพราะคุณไม่สามารถกลายพันธุ์this.stateได้โดยตรงตามที่กล่าวไว้ในเอกสาร
this._list.push(newObject):
this.setState({list: this._list});
นี่ดูน่าเกลียดสำหรับฉัน มีวิธีที่ดีกว่า?
คำตอบ:
concat ส่งคืนอาร์เรย์ใหม่ดังนั้นคุณสามารถทำได้
this.setState({list: this.state.list.concat([newObject])});
อีกทางเลือกหนึ่งคือตัวช่วยความไม่เปลี่ยนรูปของ React
var newState = React.addons.update(this.state, {
list : {
$push : [newObject]
}
});
this.setState(newState);
concatthis.state.list.concat([newObject])ใช้เวลาอาร์เรย์ดังนั้นคุณจะต้องการ
concatมันจะรวมอยู่ในอาร์เรย์ แต่จะเป็นการดีกว่าที่จะเพิ่มอาร์เรย์ด้วยตัวคุณเองให้ชัดเจน: ถ้าคุณมี[[1,2], [3,4]]และต้องการเพิ่ม[5,6]เป็นองค์ประกอบถัดไปคุณต้องทำ.concat([[5,6]])อย่างอื่น จะลงเอยด้วย[[1,2], [3,4], 5, 6].
Array.concatให้เต้นเพิ่มไลบรารีอื่น
setState ()สามารถเรียกได้โดยใช้ฟังก์ชันเป็นพารามิเตอร์:
this.setState((state) => ({ list: state.list.concat(newObj) }))
หรือใน ES5:
this.setState(function(state) {
return {
list: state.list.concat(newObj)
}
})
this.setState((state) => ({ list: state.list.push(newObj) }))
NUMBERซึ่งจะถูกตั้งค่าในlistตัวแปร
this.setState((state) => ({ list: [...state.list, newObj] }))
จากเอกสารตอบกลับ ( https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ):
เนื่องจาก this.props และ this.state อาจได้รับการอัปเดตแบบอะซิงโครนัสคุณจึงไม่ควรใช้ค่าเหล่านี้ในการคำนวณสถานะถัดไป
ดังนั้นคุณควรทำสิ่งนี้แทน:
this.setState((prevState) => ({
contacts: prevState.contacts.concat([contact])
}));