Reactjs 使用useState更新价格

我是react的新手，需要帮助使用UseState实现价格计数器。 我要做的不是下面的代码，而是使用price作为useState，比如“const[price，setPrice]=useState（995）”

取决于有多少员工，价格将提高到220

有人能帮我吗

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)
  
  let price = 0;
  
  const calculatePrice = () => {
    
    if (employees <= 4 && price !== 995) {

      return price = 995;
 

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

      return price = employees * 220;
     

    } else if (employees >= 51 && employees <= 100) {
      
      return price = 995 + employees * 200;
   

    } else if (employees >= 101 && employees <= 200) {
      
      return price = 995 + employees * 195;
    

    } else if (employees >= 201) {

      return price = "Kontakta oss för offert!";
     

    }

    return 345;
  }

  return (
    <div className="App">
      <div 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)}
        />

      </div>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从“rc滑块”导入滑块；
导入“rc slider/assets/index.css”；
导入“/App.css”；
函数App（）{
const[employees，setEmployees]=useState（1）
让价格=0；
常量计算价格=（）=>{
如果（员工=5&&employees=51&&employees=101&&employees=201）{
返回价格=“Kontakta oss för offert！”；
}
返回345；
}
返回(
Pris:{calculatePrice（）}
安塔尔·安斯塔尔达：{雇员}
{/*anställd{employees！==1&&a'}{employees}*/}
setEmployees（v）}
/>
);
}
导出默认应用程序；

价格

似乎是从您的

员工

状态值派生的值。您通常不会在状态中存储易于从状态派生的值

您可以创建

price

状态，但这样做会/可能会被视为反模式反应

让我们逐一检查，找出哪一个是状态。问三个 关于每条数据的问题：

它是通过道具从父母那里传来的吗？如果是这样，它可能不是州政府

随着时间的推移，它是否保持不变？如果是这样，它可能不是州政府

您能否根据组件中的任何其他状态或道具进行计算？如果是，则它不是state

不推荐，但。。。 如果你真的想看，你只想看和学，那么这是一种方法，你可以把逻辑转换成

price

状态。使用

useffect

钩子响应

employees

状态的更新，以重新计算“价格”状态

function MyApp() {
  const [employees, setEmployees] = useState(1);
  const [price, setPrice] = useState(995);

  useEffect(() => {
    const calculatePrice = () => {
      if (employees <= 4) {
        return 995;
      } else if (employees <= 50) {
        return employees * 220;
      } else if (employees <= 100) {
        return 995 + employees * 200;
      } else if (employees <= 200) {
        return 995 + employees * 195;
      }
      return "Kontakta oss för offert!";
    };
    setPrice(calculatePrice());
  }, [employees]);

  return (
    <div className="App">
      <div className="calculator">
        <div>Pris: {price}</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)}
        />
      </div>
    </div>
  );
}

函数MyApp（）{
const[employees，setEmployees]=useState（1）；
const[price，setPrice]=useState（995）；
useffect（（）=>{
常量计算价格=（）=>{
如果（employees
price
似乎是从您的
employees
状态值派生出来的值。您通常不会将值存储在易于从状态派生的状态中。您的代码现在有什么问题吗？它似乎在工作，为什么需要
useState
来存储价格？我认为它更干净。而且我还想学习如何做：）如果价格与员工相关，那么在组件中计算价格是完全有效的，我认为这比不使用状态变量要好，因为价格永远不会由用户手动设置。感谢您的回复。答案正是我想要的。我将尝试阅读更多关于表示Ui状态的信息。