使用 React useState hook 设置多个状态值

Posted 2023-02-22

【中文标题】使用 React useState hook 设置多个状态值

【英文标题】：Set multiple state values with React useState hook

【发布时间】：2020-07-21 04:52:30

【问题描述】：

我想用 React 的 useState 钩子设置多个状态值，以便我可以用 useEffect 钩子分别更新它们。我有以下代码：

import React,  useState  from "react";

const initialValues = 
  phone: "",
  email: ""
;

const App = () => 
  const [order, setOrder] = useState("");
  const [paid, setPaid] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(initialValues);

  return (
    <div className="App">
    </div>
  );
;

export default App;

但是当我使用 React DevTools 检查应用程序时，我看到我的钩子有多个“状态”值，而不是“订单”、“支付”、“提交”等。

这是我的codesandbox的链接。

我的错误在哪里？如何设置多个状态值以便稍后单独更新它们？

【问题讨论】：

您的解决方案没有问题。当您解构 useState 返回的数组时，您为这些状态指定的名称仅对您的组件是本地的。 React 不知道你给 useState 返回的数组中的那些元素起什么名字。不要担心出现在开发工具中的通用名称，只需尝试您的解决方案，您就会发现它有效。对于在开发工具中显示的内容，您可以使用 useDebugValue: reactjs.org/docs/hooks-reference.html#usedebugvalue

@olpe 非常感谢。您可以发表您的评论作为答案，我会接受。

好吧，我其实在想应该是评论还是答案。

【参考方案1】：

您的解决方案没有任何问题。当您解构 useState 返回的数组时，您为这些状态指定的名称仅对您的组件是本地的。 React 不知道你给 useState 返回的数组中的那些元素起什么名字。不用担心 dev-tools 中显示的通用名称，只需尝试您的解决方案，您就会发现它有效。

对于在开发工具中显示的内容，您可以使用useDebugValue。

【参考方案2】：

你没有犯错。如果你想像这样使用单独的钩子，这就是它们在 React DevTools 中的显示方式。如果您想为每个钩子关联名称标签，请查看此 *** 答案：

Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks

【参考方案3】：

您可以使用useState 钩子创建一个状态，然后像这样将每个值放在那里。

import React,  useState  from "react";

const initialValues = 
  phone: "",
  email: ""
;

const App = () => 
  const [state, setState] = useState(
     order:'',
     paid: false,
     submitting: false,
     loading: false,
     data: initialValues
  );
  // example of setting this kind of state
  const sampleChanger = () => 
     setState(...state, paid: true, order: 'sample');
  
// etc...

【讨论】：

我相信这种模式会绕过 React 检测状态变化的能力。在小型简单应用程序中可能无关紧要，但可能会导致复杂应用程序出现问题。这个人的评论是相关且有用的：***.com/a/57102754/3684449 我也相信useReducer() 正是为此而存在的。文档：***.com/questions/53574614/…

非常感谢您的回答！谢谢大佬！