Asked Jun 14th, 3:42 a.m. 154 1 1
  • 154 1 1
+2

Thứ tự thực hiện của useState trong ví dụ Counter

Share
  • 154 1 1

Mọi người cho mình hỏi thử tự thực hiện của hàm handleIncrease này là sao nhỉ?

Ở lần click đầu tiên thì sẽ là 1 - 2.1 - 3 - 2.2

Ở các lần click tiếp theo sẽ là 1 - 3 - 2.1 - 2.2

Theo mình có đọc trên docs của React thì setState là async, nhưng mình không hiểu sao lần đầu tiên click nó lại chạy theo thứ tự như thế ạ?

StackBlittz

import React from 'react';
import './style.css';

export default function App() {
  const [count, setCount] = React.useState(1);
  const hanldeClick = () => {
    console.log('1');
    setCount((prevCount) => {
      console.log('2.1');
      return prevCount + 1;
    });
    setCount((prevCount) => {
      console.log('2.2');
      console.log('------------');
      return prevCount + 1;
    });
    console.log('3');
  };

  return (
    <div>
      <h1>Hello StackBlitz! {count}</h1>

      <button onClick={hanldeClick}>Click</button>
    </div>
  );
}

1 ANSWERS


Answered Jun 14th, 6:03 a.m.
+1

theo mình được biết thì console.log là web api, cũng là async, lần 1 nó chạy thế mới đúng. chưa giải thích được tại sao từ lần 2 nó lại chạy như vậy

Share
Jun 20th, 9:04 a.m.

@HungSmeb không thuyết phục, cả 3 bình luận bên dưới

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.