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

Question

我想用 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 检查应用程序时，我看到我的钩子有多个“状态”值，而不是“订单”、“付费”、“提交”等。

这是我的代码和框的链接。

我的错误在哪里？如何设置多个状态值以在以后分别更新它们？

Answer 1

你可以用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...

Answer 2

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

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