从类组件切换到功能组件

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

1. 当您想根据之前的基价值设置基价时，可以使用setBasePrice函数的回调版本：

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

这样您就知道该basePrice值将根据最新值计算得出。

文档

2. 据我了解，每当基价发生变化时，您都需要计算总金额。相反，这个计算无处不在的basePrice变化，您可以添加这一个useEffect

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

在您当前的代码中，由于setBasePrice是异步的，它在setTotalPrice运行时不会完成执行，因此会落后一步。在这里，basePrice被添加为依赖项，useEffect一旦basePrice更改就会更新。

PS：你的类组件也直接设置一个值来状态这是错误的，它应该使用 asetState来执行该更新。