时间戳

首页 > 解决方案 > 使用 React useState hook 设置多个状态值

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

问题描述

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

这是我的代码框的链接。

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

标签： reactjs

解决方案

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

推荐阅读