如何使用react hook react.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>
}

我已经测试过了，但没有按预期工作。要使用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>
);
}

如果在任何方法中，你只想更新一个属性，例如：color，你可以这样做：

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

Answer 2

我相信unstable_batchUpdates适用于钩子，也适用于基于类的组件。除了前缀unstable_之外，Dan Abramov和React Redux文档中也提到了它，所以我认为使用它是安全的：

import { unstable_batchUpdates } from 'react-dom';
...
const onClickRandomButton = () => unstable_batchUpdates(() => {
setColor(Math.random() * 10)
setSize(Math.random() * 10)
setWeight(Math.random() * 10)
})