从类组件切换到功能组件

Question

所以我这里有代码，应该根据房产平方英尺和所选套餐来计算价格。

当我这样编写时，代码曾经与类组件一起使用......但是我现在使用反应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. 当你想之前根据基价的值设置基价时，可以使用setBasePrice函数的回调版本：

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

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

文档

2. 据我了解，每当基本价格发生变化时，您都需要计算总金额。您可以将其添加到useEffect，而不是在更改basePrice任何地方计算此值

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

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

PS：您的类组件还直接设置了一个值来说明哪个是错误的，它应该使用setState来执行该更新。