Question

所以我这里有一些代码，该代码应该根据房产平方英尺和所选的包裹来计算价格。

当我这样编写代码时，曾经使用过这些代码来处理类组件……但是我现在正在使用react JS和Functional组件。

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

在使basePrice += basePrice * (percentage / 100);在功能组件中正常工作时，我也遇到了问题。

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

已更新

我添加了useEffect挂钩，总价格有误。 5500平方英尺的价格应该是272美元，但要涨到112美元。我的旧代码没有执行此操作，因此我不确定发生了什么。

类组件

 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(0);
const [newPrice, setNewPrice] = useState(null);
const [totalPrice, setTotalPrice] = useState(null);

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

const checkPrice = () => { 
      debugger;
       if(packageSelected.packages === "Photography"){
         setBasePrice(159.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 => (basePrice * (percentage / 100)));
 }
  };

Answer 1

如果您想根据基础价格的早些时候设置基础价格，可以使用setBasePrice函数的回调版本：

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

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

Docs

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

useEffect

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

在您当前的代码中，由于setBasePrice是异步的，因此在setTotalPrice运行时它将无法完成执行，因此将落后一步。在这里，basePrice被添加为对useEffect的依赖，并且basePrice更改后将被更新。

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

从类组件切换到功能组件

1 个答案: