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

这是指向我的codesandbox的链接。

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

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。

Answer 3

您没有记错。如果您想使用这样的独立钩子，这就是它们在React DevTools中的显示方式。如果您希望每个挂钩都具有名称标签，请查看以下StackOverflow答案：

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

使用React useState钩子设置多个状态值

3 个答案: