React.js setState

Bài trước ta đã biết cách viết một State là như thế nào, bài này sẽ giúp các bạn cách cập nhật dữ liệu của component bằng các sử dụng setState.

Thay đổi dữ liệu bên trong component với State

Muốn thay đổi hay cập nhật nội dung của một State, chúng ta sử dụng this.setState, khi này dữ liệu thay đổi sẽ được cập nhật tới State hiện tại.
Để hiểu rõ hơn về this.setState, chúng ta xem ví dụ sau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      class Member extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            name: "Bùi Văn Tèo",
            age: 25
          };
        };

        changeName = () => {
          this.setState({
            name: "Bùi Văn Tý",
            age: 27
          })
        };

        render() {
          return (
            <div>
              <h2>{this.state.name}</h2>
              <p>Tuổi: {this.state.age}</p>
              <button type="button" onClick={this.changeName}>Change name</button>
            </div>
          );
        };
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Nội dung trên ta đã dùng this.setState để thay đổi name của State.
Khi click vào button sẽ gọi function changeName, khi này this.setState sẽ cập nhật lại dữ liệu mới cho State.

Hiển thị trình duyệt sau khi đã click vào button

Làm thử!

Xem thêm ví dụ về setState

Ta sẽ thử sử dụng setState với dữ liệu Object nhiều phần tử để biết thêm nhiều trường hợp khác nhau:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      class Member extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            users: [
              { name: "Bùi Văn Tèo", age: 25 },
              { name: "Trần Văn An", age: 29 },
              { name: "Nguyễn Thị Bưởi", age: 22 }
            ],
            job: "IT Communicator"
          };
        };

        changeName = () => {
          this.setState({
            users: [
              { name: "Bùi Văn Tý", age: 27 },
              { name: "Trần Văn An", age: 29 },
              { name: "Nguyễn Thị Bưởi", age: 22 }
            ],
            job: "Bridge System Engineer"
          })
        };

        render() {
          return (
            <div>
              <h2>{this.state.users[0].name}</h2>
              <p>Tuổi: {this.state.users[0].age}</p>
              <p>Nghề nghiệp: {this.state.job}</p>
              <button type="button" onClick={this.changeName}>Change Data</button>
            </div>
          );
        };
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Hiển thị trình duyệt sau khi đã click vào button

Làm thử!

React.js State

Component - Lifecycle