javascript - 如何使用 react 钩子(Hook) react.js 一次更新多个状态

Question

我想知道我是否可以在同一个函数中多次使用 setState 钩子(Hook)。
例如，像这样

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>

}

我已经测试过了，但它没有按预期工作。
使用钩子(Hook)一次设置多个值，我应该怎么做？
谢谢

Answer 1

您可以使用一个带有对象值的 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>
  );
}

如果在任何方法中您只想更新一个属性，例如:颜色，您可以执行以下操作:

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