Lỗi update state với checkbox group

[GTA_Viet_Nam]

Xin chào, hàm setState phải nhận vào 1 state mới, replace state cũ nhưng đoạn

setState({
      ...state,
      [event.target.name]: event.target.checked,
    });

bị update chậm so với mình mong đợi.

Cụ thể là :

export default function CheckboxesGroup() {
  const [state, setState] = React.useState({
    gilad: false,
    jason: false,
    antoine: false,
  });

  const handleChange = (event) => {
    setState({
      ...state,
      [event.target.name]: event.target.checked,
    });
    console.log(state) //<=========
  };

  const { gilad, jason, antoine } = state;


  return (
    <Box sx={{ display: 'flex' }}>
      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
       
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox checked={gilad} onChange={handleChange} name="gilad" />
            }
            label="Gilad Gray"
          />
          <FormControlLabel
            control={
              <Checkbox checked={jason} onChange={handleChange} name="jason" />
            }
            label="Jason Killian"
          />
          <FormControlLabel
            control={
              <Checkbox checked={antoine} onChange={handleChange} name="antoine" />
            }
            label="Antoine Llorca"
          />
        </FormGroup>
      </FormControl>
     </Box>
  );
}

Kết quả :

{gilad: false, jason: false, antoine: false}  đáng lẽ phải là true - false -false

{gilad: true, jason: false, antoine: false}   đáng lẽ phải là true - true -false

{gilad: true, jason: true, antoine: false}    áng lẽ phải là true -  true - true

Nhưng mong muốn của mình phải là:
check vào checkbox thứ nhất thì : true, false, false
check vào checkbox thứ hai thì : true, true, false.
check cái thứ 3 thì cả 3 đều true.

Mong được giúp đỡ. Cảm ơn!

[SITUVN.gcd]

Có thể vấn đề nằm ở sự kiện, khi sự kiện xảy ra thì event.target.checked vẫn chưa thay đổi. Để chắc thì bạn nên in ra event.target.checked xem nó đúng chưa.
Nếu event.target.checked đã đúng thì vấn đề còn lại do setState.

Sau khi tìm hiểu thì:

setState là bất đồng bộ.

Why is setState in reactjs Async instead of Sync?

Để đoạn mã in đúng thì phải là:

setState({
      ...state,
      [event.target.name]: event.target.checked,
    },
    function(){
        console.log(state);
    }
);

[pedimoh269 (pedimo)]

@SITUVN.gcd setState là async nhưng setState chỉ có một đối số thôi, không dùng đối số callback thứ 2 đươc. Nếu dùng callback thứ 2 sẽ bị lỗi react-dom.development.js Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().
mà phải dùng kết hợp với useEffect. Mà không hiểu sao những page khác vẫn chỉ cách dùng callback làm đối số thứ 2 cho setState

[pedimoh269 (pedimo)]

@SITUVN.gcd @htwap À sorry mọi người, mình nhầm. setState bên class compnent có 2 đối số là state value và callback, còn setState bên function chỉ có 1 đối số.

[htwap (lu___va_sa__)]

mình cũng nhầm nên xoá reply rồi
bạn chủ thớt hỏi về setState của hook trong functional component
còn bạn kia trả lời về setState của class component

[pedimoh269 (pedimo)]

May quá, hôm nay maintain project cũ chợt nhớ ra bài viết này nên fix được con bug trong 1 phút 30s

P/S: Ai đang dùng react 16 bị lỗi data chậm hơn 1 nhịp so với thao tác thì có thể do lỗi này nha.