使用 useState 响应更新价格

Question

我是 react 新手，需要帮助才能使用 UseState 实现价格计数器。 我想要做的而不是下面的代码是将价格用作 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;

Answer 1

price 似乎是您的 employees 状态值的派生值。您通常不会将值存储在易于从状态派生的状态中。

您可以创建price 状态，但这样做会/可能被视为反模式 React。

Identify the Minimal (but complete) Representation of UI State

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

1. 它是通过 props 从父级传入的吗？如果是这样，它可能不是状态。
2. 它会随着时间的推移保持不变吗？如果是这样，它可能不是状态。
3. 你可以根据组件中的任何其他状态或道具来计算它吗？如果是这样，它不是状态。

不推荐，但是...

如果您真的想要，并且只想看到并学习，那么这是您可以将逻辑移动到price 状态的一种方式。使用useEffect 挂钩响应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>
  );
}

演示

更正确和最佳的解决方案是您已经拥有的解决方案，它计算派生的price 值来自您的状态。