从类组件切换到功能组件

Question

所以我这里有代码，它应该根据房产面积和选择的包计算价格。

当我写成这样的时候，它用于处理类组件的代码......但我现在使用的是 react JS 和函数式组件。

我现在遇到的当前问题是让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. 当你想更早根据base price的值来设置base price时，可以使用setBasePrice函数的回调版本：

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

这样您就知道basePrice 的值将从最新的值开始计算。

Docs

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

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

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

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