Tại sao không thử nó ra? Show
Đầu ra:
Rõ ràng, bạn có thể quay lại và tái tạo các giá trị giống nhau lặp đi lặp lại nếu bạn nhận được trạng thái và khôi phục nó. Bạn không thể sử dụng các ngẫu nhiên khác nhau ở giữa hoặc bạn thay đổi trạng thái.
Đầu ra:
Đầu ra:
4 hữu ích 5 bình luận chia sẻ
21/10/2021 13:26 setstate trong ReactJS là gì? Đâu là cách khởi tạo và thay đổi trạng thái của SetState ReactJs, hãy cùng T3H khám phá ngay sau đây!
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:
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.
Tạo ứng dụng React:
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:
>>> Đọ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 ReactJsChú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ó.
Cách cập nhật nhiều thuộc tính trong setState ReactJSState 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.
Cách cập nhật giá trị của setstate ReactJs bằng cách sử dụng propsChú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.
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. |