การเพิ่ม State ลงใน Class
State จะเป็นการส่งค่า เก็บค่า เปลี่ยนแปลงค่าต่างๆ เมื่อมีการเปลี่ยนแปลงค่าอะไรสักอย่างอะไร State ก็จะเป็นตัวทำหน้าที่ ต่อจากนั่นระบบจะทำ patch UI การเรียกค่า จะเรียกผ่าน this.state.[Param]; ส่วนการกำหนดค่าจะเรียกผ่าน this.setstate(***);
Example เราจะย้ายค่า Date (วันที่) จาก Props ไปที่ State ด้วยโค้ดนี้ :
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);
1. แทนที่โค้ด this.props.date ด้วย this.state.date ลงใน Method Render() :
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
2. เพิ่ท Class Constructor แล้วกำหนดค่า date ให้ this.state :
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ในส่วนของโค้ด Constructor มีดังนี้ :
constructor(props) {
super(props);
this.state = {date: new Date()};
}
ใน Component แต่ละ Class นั้น ควรจะมี โค้ด Constructor และ Props อยู่ด้วยเสมอ
3. เอา date ออกจาก Elements <Clock /> :
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
ผลลัพธ์ที่ได้ :
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
การใช้ State ให้ถูกต้อง
มี 3 อย่างที่เราควรรู้ในการใช้ State
1. ห้ามแก้ไข State โดยตรง :
// Wrong
this.state.comment = 'Hello';
แต่ควรจะแทนค่า ด้วย this.setState() :
// Correct
this.setState({comment: 'Hello'});
2. การปรับปรุงสถานะ บางทีอาจจะไม่ตรงกัน
การประมวลผลของ setState() อาจเกิดขึ้นแค่อย่างเดียว เพราะว่า this.props และ this.state บางทีอาจจะ Update ผิดพลาด เราจึงไม่ควรใช้ในการคำนวน
Example โค้ดการนับเลขที่ผิดพลาด :
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
วิธีที่ถูกคือ ใช้ฟังก์ชั่น Arrow โค้ดก็จะทำงานได้ปกติ :
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
แต่มีอีกวิธีหนึ่งที่ได้การยอมรับว่า ถูกต้องกว่าวิธีแรก คือ :
// Correct
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
3. รวมการแก้ไข State
เมื่อเราเรียก setState() React จะรวม Object ให้อยู่ที่ State ปัจจุบัน
Example State อาจจะมีหลายตัวแปร เราเรียกตัวแปรเหล่านี้ว่า Object :
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
จากนั้นเราสามารถ Update ได้โดยใช้ setState () แยกต่างหาก :
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
อ้างอิงข้อมูล : https://reactjs.org