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

Question

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

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

这是我的 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...