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

Posted 2023-02-15

【中文标题】如何使用反应钩子 react.js 一次更新多个状态

【英文标题】：how to update multiple state at once using react hook 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 中设置状态是异步的。如果您尝试在同一个事件处理函数中对新值进行操作，则无法保证状态将完成更新。

【参考方案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
    );
  ;
...