从类组件切换到功能组件

Question

因此，我这里的代码应该根据属性平方英尺和所选的包来计算价格。

当我这样编写代码时，该代码曾用于处理类组件，但是我现在使用React JS和Functional组件。

我当前遇到的当前问题是让setBasePrice(1234);实际设置基准价格，以便可以在函数中进行计算。

在使basePrice += basePrice * (percentage / 100);在功能组件中正常工作方面也存在问题。

我知道我现在完全错了，只是希望有人可以将我指向正确的方向，并可能向我展示如何清理代码。

类组件

 this.state = {
      propertySqft: "",
      packageSelected: this.props.location.state,
      totalPrice: null,
      basePrice: null
    };
  }

  checkPrice = () => { 
      debugger;
       if(this.state.packageSelected === "Photography"){
        this.state.basePrice = 159.998;
       }else if(this.state.packageSelected === "Video"){
            this.state.basePrice = 416.998;
       }else if(this.state.packageSelected === "Drone Aerial Photos Only"){
            this.state.basePrice = 199.998;
       }else if(this.state.packageSelected === "Drone Aerial Video Only"){
            this.state.basePrice = 249.998;
       }else if(this.state.packageSelected === "Drone Aerials Photo & Video"){
            this.state.basePrice = 299.998;
       }else if(this.state.packageSelected === "Photography, Video, Drone Aerials"){
            this.state.basePrice = 559.998;
       }if(this.state.propertySqft > 2500){
   let overage = this.state.propertySqft - 2000;
   let percentage = Math.floor(overage / 500) * 10;
   this.state.basePrice += this.state.basePrice * (percentage / 100);


  }
     this.setState({ totalPrice: Math.round(this.state.basePrice * 100) / 100 }); 
  }

功能组件

const [basePrice, setBasePrice] = useState(null);
const [newPrice, setNewPrice] = useState(null);
const [totalPrice, setTotalPrice] = useState(null);

const checkPrice = () => { 
      debugger;
       if(packageSelected.packages === "Photography"){
         setBasePrice(339.998);
       }else if(packageSelected.packages === "Video"){
         setBasePrice(516.998);
       }else if(packageSelected.packages === "Drone Aerial Photos Only"){
         setBasePrice(119.998);
       }else if(packageSelected.packages === "Drone Aerial Video Only"){
         setBasePrice(269.998);
       }else if(packageSelected.packages === "Drone Aerials Photo & Video"){
         setBasePrice(549.998);
       }else if(packageSelected.packages === "Photography, Video, Drone Aerials"){
         setBasePrice(566.998);   
       }if(propertySqft > 2000){
   const overage = propertySqft - 2000;
   const percentage = Math.floor(overage / 500) * 10;
    setBasePrice((basePrice * (percentage / 100)));

  }
   setTotalPrice(Math.round(basePrice * 100) / 100);
  };

Answer 1

1. [如果您想根据基础价格的早期值来设置基础价格，则可以使用setBasePrice函数的回调版本：

setBasePrice(basePrice => (basePrice * (percentage / 100));

通过这种方式，您知道basePrice值将从最新的值开始计算。

Docs

2. 据我了解，每当基准价格发生变化时，您都需要计算总金额。您可以将其添加到basePrice

useEffect

在您当前的代码中，由于

useEffect(() => {
  setTotalPrice(Math.round(basePrice * 100) / 100);
}, [basePrice]);

是异步的，因此当setBasePrice运行时它将无法完成执行，因此将落后一步。此处，setTotalPrice作为依赖项添加到basePrice，并且一旦useEffect更改，它将被更新。

PS：您的类组件也正在直接将一个值设置为状态错误，应该使用basePrice来执行该更新。