Reactjs 如何使用一个状态和中的变量，而不是多个状态和中的单个变量？（反应）

我正在使用React，我希望使用一个对象的单个状态，而不是保存一个变量的多个状态，例如：

{
priceAmount: 
employeesAmount:
answer: (yes or no from radio)
}

我希望一个对象保存在一个状态中，我该怎么做？我想我可能只是语法错误

我读过几篇不同的文章，但都没有成功。有人能解决这个问题吗？ 谢谢

我该怎么做？我的代码如下：

import React, {useState} from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import './App.css';

function App() {

  const [employees, setEmployees] = useState(1)

  // const [priceData, setPriceData] = useState('');
  // const [employeesData, setEmployeesData] = useState('');


  const [formData, setFormData] = useState({
    priceAmount: 0,
    employeesAmount: 0
  });



  const Submit = (e) => {
    e.preventDefault()
    // formValues.priceAmount = price;
    // formValues.employeesAmount = employees;
    // setPriceData(price)
    // setEmployeesData(employees)
    // setpriceData({price, employees})

    setFormData({
      ...formData,
      price: employees,
    });
  }


  
  let price = 0;

  
  const calculatePrice = () => {
    
    if (employees <= 4 && price !== 995) {

      return price = 995;
      // console.log("1-4: price: " + price)

    } else if (employees >= 5 && employees <= 50) {

      return price = employees * 220;
      // console.log("5-50: price: " + price)

    } else if (employees >= 51 && employees <= 100) {
      
      return price = 995 + employees * 200;
      // console.log("51-100: price: " + price)

    } else if (employees >= 101 && employees <= 200) {
      
      return price = 995 + employees * 195;
      // console.log("101-200: price: " + price)

    } else if (employees >= 201) {

      return price = "Kontakta oss för offert!";
      // console.log("201+, price är: " + price)

    }

    // return 345;
  }

  return (
    <div className="App">
      <form onSubmit={Submit} className="calculator">

        <div>Pris: {calculatePrice()}</div>
        <div> Antal anställda: {employees}</div>
        {/* <div> anställd{employees !== 1 && 'a'} {employees}</div> */}
        <Slider
          min={1}
          max={201}
          value={employees}
          onChange={(v) => setEmployees(v)}
        />
        
        <p>Vill du arbeta digitalt och effektivt med er lönehantering?</p>
        <input type="radio" name="ja" id="optionJa"/> Ja

        <input type="radio" name="ja" id="optionNej" className="margin-radio"/> Nej


        <br/>

        <button className="submitBtn" type="submit" value="Submit">Begär offert</button>

      </form>

      <div className="custom-margin">
        <p>Data tagen från sparad state: </p>
        {/* <small>Pris: {priceData}</small> */}
        <small>formData: {formData}</small>
        <br/>
        {/* <small> Antal anställda: {employeesData}</small> */}
      </div>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从“rc滑块”导入滑块；
导入“rc slider/assets/index.css”；
导入“/App.css”；
函数App（）{
const[employees，setEmployees]=useState（1）
//常量[priceData，setPriceData]=使用状态（“”）；
//const[employeesData，setEmployeesData]=useState（“”）；
常量[formData，setFormData]=useState({
价格金额：0，
雇员人数：0
});
const Submit=（e）=>{
e、 预防默认值（）
//formValues.priceAmount=价格；
//formValues.employeesAmount=员工；
//setPriceData（价格）
//setEmployeesData（员工）
//setpriceData（{price，employees}）
setFormData({
…表格数据，
价格：员工，
});
}
让价格=0；
常量计算价格=（）=>{
如果（员工=5&&employees=51&&employees=101&&employees=201）{
返回价格=“Kontakta oss för offert！”；
//console.log（“201+，priceär:”+price）
}
//返回345；
}
返回(
Pris:{calculatePrice（）}
安塔尔·安斯塔尔达：{雇员}
{/*anställd{employees！==1&&a'}{employees}*/}
setEmployees（v）}
/>
阿尔贝塔数字医疗中心

青年成就
Nej


贝格奥菲尔
斯巴达州的数据：

{/*Pris:{priceData}*/}
formData:{formData}


{/*安塔尔安斯塔：{employeesData}*/}
);
}
导出默认应用程序；

您的问题在于：

formData:{formData}

formData是一个对象，react无法渲染对象。数据类型必须是基元类型或jsx元素才能呈现（或基元类型或jsx元素的数组）

因此，您必须从对象中提取数据，并将其作为项目数组传递

表格数据：
{
Object.entries（formData.map）（[key，val]）=>{val}）
}

或者像这样

表格数据：
价格金额：{formData.priceAmount}
员工金额：{formData.employeesAmount}

---

查看

不清楚问题是什么。机制相同；任何东西都可以是状态值，包括对象。以这种方式管理复杂的状态可能会让人恼火，例如，一个嵌套很深的状态，但除此之外它只是一个对象。我的问题是它对我不起作用，我要么因为语法错误而出错，要么就是不起作用。你知道我应该如何编写对象和状态的语法吗？就像你正在做的一样（尽管我不知道为什么

price

的对象键中会有类似

employees

的内容）。是的，我应该如何编写？我试过这个：setFormData（{…formData，priceAmount:price，employeesAmount:employees}）；这给了我一个错误：“错误：对象作为React子对象无效（发现：具有键{priceAmount，employeesAmount}的对象）。如果您想要呈现子对象的集合，请改用数组。”