Как обновить несколько состояний одновременно с помощью кнопки «Реакция Хук». js

Question

Я хотел бы знать, могу ли я использовать хук setState несколько раз в одной и той же функции. Например, вот так

import React, { useEffect, useState } from 'react';

function(props) {
const [color, setColor] = useState(0)
const [size, setSize]= useState(0)
const [weight, setWeight] = useState(0)

const onClickRandomButton = () => {
    setColor(Math.random() * 10)
    setSize(Math.random() * 10)
    setWeight(Math.random() * 10)
}

return <div>
  <button onClick = {onClickRandomButton}>random</button>
</div>

}

Я тестировал, но он не работает, как ожидалось. Как установить несколько значений одновременно с помощью ловушки, как мне это сделать? Спасибо

Answer 1

Полагаю, unstable_batchUpdates будет работать как для хуков, так и для компонентов на основе классов. Помимо префикса unstable_ он упоминается Даном Абрамовым и в React-Redux docs , поэтому я считаю его безопасным:

import { unstable_batchUpdates } from 'react-dom';
...

const onClickRandomButton = () => unstable_batchUpdates(() => {
    setColor(Math.random() * 10)
    setSize(Math.random() * 10)
    setWeight(Math.random() * 10)
})

Answer 2

Вы можете использовать один useState со значением объекта для одновременного обновления стилей:

import React, { useEffect, useState } from 'react';

export default function (props) {
  const [style, setStyle] = useState({ color: 0, size: 0, weight: 0 });

  const onClickRandomButton = () => {
    setStyle({
      color: Math.random() * 10,
      size: Math.random() * 10,
      weight: Math.random() * 10,
    });
  };

  return (
    <div>
      <button onClick={onClickRandomButton}>random</button>
    </div>
  );
}

И если в любом методе вы хотите обновить только одно свойство, например: color, вы можете сделать что-то вроде это:

...
  const handleEditColor = color => {
    setStyle({
      ...style,
      color
    });
  };
...