不推荐，但是...

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

<块引用>

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

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

不推荐，但是...

如果您真的想要，并且只想看到它并学习，那么这是将逻辑移至 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 值。

使用 useState 反应更新价格

1 个答案:

不推荐，但是...

演示