如何使用反应钩子 react.js 一次更新多个状态答案

【问题标题】：how to update multiple state at once using react hook react.js如何使用反应钩子 react.js 一次更新多个状态
【发布时间】：2020-06-12 02:35:18
【问题描述】：

我想知道我是否可以在同一个函数中多次使用 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>

}

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

【问题讨论】：

useState 部分在哪里？
抱歉，打错了
conClickRandomButton 的名字也是错字吗？
代码按预期工作：codesandbox.io/s/dazzling-hill-1ypn7 ?
请记住，在 React 中设置状态是异步的。如果您尝试在同一个事件处理函数中对新值进行操作，则无法保证状态将完成更新。

标签： javascript reactjs react-hooks setstate

【解决方案1】：

要在前一个状态的基础上更新多个状态，请使用 setState 和扩展运算符 ...。

import React, {useState} from 'react';

function(props) {
    const [state, setState] = useState({
        color: "",
        size: "",
        weight: "",
    })
    
    const onClickRandomButton = () => {
        // {color: "White", size: 0.238472342..., weight: ""}
        setState({...state, color: "White", size: Math.random()*10});
    }
    
    return(
        <div>
          <button onClick={onClickRandomButton}>random</button>
        </div>
    );
}

要更新将覆盖状态中所有值的多个状态，请使用不带扩展运算符的 setState。

import React, {useState} from 'react';

function(props) {
    const [state, setState] = useState({
        color: "",
        size: "",
        weight: "",
    })
    
    const onClickRandomButton = () => {
        // {color: "White", size: 0.238472342...}
        setState({color: "White", size: Math.random()*10});
    }
    
    return(
        <div>
          <button onClick={onClickRandomButton}>random</button>
        </div>
    );
}

【讨论】：

【解决方案2】：

我相信unstable_batchUpdates 将适用于钩子，也适用于基于类的组件。除了前缀unstable_，Dan Abramov 和in 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)
})

【讨论】：

谢谢，知道这是可用的帮助

【解决方案3】：

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

【讨论】：