พิจารณาตัวอย่างตะขอด้านล่าง
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
โดยทั่วไปเราใช้เมธอด this.forceUpdate () เพื่อบังคับให้คอมโพเนนต์แสดงผลซ้ำทันทีในคอมโพเนนต์คลาส React ดังตัวอย่างด้านล่าง
class Test extends Component{
constructor(props){
super(props);
this.state = {
count:0,
count2: 100
}
this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component
}
setCount(){
let count = this.state.count;
count = count+1;
let count2 = this.state.count2;
count2 = count2+1;
this.setState({count});
this.forceUpdate();
//before below setState the component will re-render immediately when this.forceUpdate() is called
this.setState({count2: count
}
render(){
return (<div>
<span>Count: {this.state.count}></span>.
<button onClick={this.setCount}></button>
</div>
}
}
แต่คำถามของฉันคือฉันจะบังคับให้องค์ประกอบการทำงานด้านบนแสดงผลใหม่ทันทีด้วย hooks ได้อย่างไร
this.forceUpdate()
? อาจมีวิธีที่จะทำสิ่งเดียวกันให้สำเร็จโดยไม่ต้องทำเช่นนั้น