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

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...