setState ReactJs là gì? Cách sử dụng setstate trong lập trình ReactjS

SetState ReactJs là gì?

Khi mới tiếp cận với ReactJS, bạn sẽ cần tiếp cận với khái niệm Component. Một Component trong React có vòng đời 4 giai đoạn. Ở giai đoạn Initialization, hành động được đề cập trong giai đoạn này là khởi tạo giá trị cho Props và State. Có thể nói, cả hai chính là dữ liệu input của hàm render(). State được khởi tạo giá trị mặc định khi Component được mount, State là đầu vào có thể thay đổi được. Mỗi Component tự quản lý State của nó, không chia sẻ với các Component con, State là thuộc tính private trong mỗi Component.

Ví dụ khởi tạo State:

class Component extends React.Component

constructor(props) {

  super(props);

  

  this.state = {

    count: 0

  }

}

Cú pháp: Chúng ta có thể sử dụng setState () để thay đổi trạng thái của thành phần một cách trực tiếp cũng như thông qua một hàm arrow.

setState({ stateName : updatedStateValue })




// OR

setState((prevState) => ({ 

   stateName: prevState.stateName + 1 

}))

Tạo ứng dụng React:

• Bước 1: Tạo ứng dụng React bằng lệnh sau:

npx create-react-app foldername

Bước 2: Sau khi tạo thư mục dự án của bạn tức là tên thư mục, hãy di chuyển đến nó bằng lệnh sau:

cd foldername

>>> Đọc thêm: ReactJS Router - Mọi điều bạn cần biết về Router trong ReactJS

Hướng dẫn cách cập nhật thuộc tính đơn trong setstate ReactJs

Chúng ta thiết lập giá trị trạng thái ban đầu bên trong hàm khởi tạo và tạo một hàm updateState () khác để cập nhật trạng thái. Bây giờ khi chúng ta nhấp vào nút, nút sau sẽ được kích hoạt dưới dạng onClick event thay đổi giá trị trạng thái. Chúng ta thực hiện phương thức setState () trong hàm updateState () bằng cách viết:

this.setState({greeting : 'GeeksForGeeks welcomes you !!'})

Như bạn có thể thấy, chúng ta đang truyền một đối tượng vào setState (). Đối tượng này chứa một phần của trạng thái mà chúng ta muốn cập nhật, trong trường hợp này, là giá trị của greeting . React nhận giá trị này và kết hợp nó vào đối tượng đang cần nó. 

import React, { Component } from 'react'

class App extends Component {

constructor(props){

super(props)

// Set initial state

this.state = {greeting :

'Click the button to receive greetings'}

// Binding this keyword

this.updateState = this.updateState.bind(this)

}

updateState(){

// Changing state

this.setState({greeting :

'GeeksForGeeks welcomes you !!'})

}

render(){

return (

<div>

<h2>Greetings Portal</h2>

<p>{this.state.greeting}</p>

{/* Set click handler */}

<button onClick={this.updateState}>

Click me!

</button>

</div>

)

}

}

export default App;

Cách cập nhật nhiều thuộc tính trong setState ReactJS

State Object của một component có thể chứa nhiều thuộc tính và React cho phép sử dụng hàm setState () để cập nhật chỉ một tập hợp con của các thuộc tính đó cũng như sử dụng nhiều phương thức setState () để cập nhật từng giá trị thuộc tính một cách độc lập. 

Chúng ta thiết lập trạng thái ban đầu của mình bằng cách khởi tạo ba thuộc tính khác nhau, sau đó tạo một hàm updateState () cập nhật giá trị của nó bất cứ khi nào nó được gọi. Một lần nữa, chức năng này được kích hoạt dưới dạng onclick event và chúng tanhận được các giá trị cập nhật của các trạng thái cùng một lúc. 

import React, { Component } from 'react'

class App extends Component {

constructor(props){

super(props)

// Set initial state

this.state = {

test: "Nil",

questions: "0",

students: "0"

}

// Binding this keyword

this.updateState = this.updateState.bind(this)

}

updateState(){

// Changing state

this.setState({

test: 'Programming Quiz',

questions: '10',

students: '30'

})

}

render(){

return (

<div>

<h2>Test Portal</h2>

<p>{this.state.test}</p>




<p>{this.state.questions}</p>




<p>{this.state.students}</p>

{/* Set click handler */}

<button onClick={this.updateState}>

Click me!

</button>

</div>

)

}

}

export default App;

Cách cập nhật giá trị của setstate ReactJs bằng cách sử dụng props

Chúng ta thiết lập một mảng các chuỗi testTopics làm props cho thành phần. Một hàm listOfTopics được tạo để map tất cả các chuỗi dưới dạng các mục danh sách trong các chủ đề trạng thái. Chức năng updateState được kích hoạt và đặt các chủ đề để liệt kê các mục. Khi chúng ta nhấp vào button, các giá trị trạng thái sẽ được cập nhật. Phương pháp này nổi tiếng với khả năng xử lý dữ liệu phức tạp và cập nhật trạng thái rất dễ dàng. 

import React, { Component } from 'react'

class App extends Component {

static defaultProps = {

testTopics : [

'React JS', 'Node JS', 'Compound components',

'Lifecycle Methods', 'Event Handlers',

'Router', 'React Hooks', 'Redux',

'Context'

]

}




constructor(props){

super(props)

// Set initial state

this.state = {

testName: "React js Test",

topics: ''

}

// Binding this keyword

this.updateState = this.updateState.bind(this)

}

listOfTopics(){

return (

<ul>

{this.props.testTopics.map(topic => (

<li>{topic}</li>

))}

</ul>

)

}




updateState(){

// Changing state

this.setState({

testName: 'Test topics are:',

topics: this.listOfTopics()

})

}

render(){

return (

<div>

<h2>Test Information</h2>

<p>{this.state.testName}</p>

<p>{this.state.topics}</p>

{/* Set click handler */}

<button onClick={this.updateState}>

Click me!

</button>

</div>

)

}

}

export default App;

Trên đây là một số thông tin về ReactJs setState bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs của Viện công nghệ thông tin T3H.