如何在效果上比较旧值和新值?

假设我有3个输入:rate、sendAmount和receiveAmount。我把这3个输入放在Useffect扩散参数上。这些规则是:

  • 如果sendAmount发生了变化,我将计算receiveAmount=sendAmount*费率
  • 如果receiveAmount发生变化,我将计算sendAmount=receiveAmount/费率
  • 如果费率发生变化,我会在sendamunt>时计算receiveAmount=sendamunt*rate;0或当receiveAmount>0

这是代码沙盒https://codesandbox.io/s/pkl6vn7x6j 来演示这个问题

是否有一种方法可以比较componentDidUpdate上的oldValuesnewValues而不是为这种情况创建3个处理程序

谢谢


这是我使用usePrevious
https://codesandbox.io/s/30n01w2r06

在这种情况下,我不能使用multipleuseffect,因为每次更改都会导致相同的网络调用。这就是为什么我也使用changecont来跟踪更改。这changecont也有助于仅从本地跟踪更改,因此我可以防止由于服务器的更改而进行不必要的网络调用

您可以使用useRef

函数usePrevious(值){
const ref=useRef();
使用效果(()=&gt{
参考电流=值;
});
返回参考电流;
}

然后在useffect

常量组件=(道具)=>{
常量{receiveAmount,sendAmount}=props
const prevAmount=usePrevious({receiveAmount,sendAmount});
使用效果(()=&gt{
如果(PreviveAmount.receiveAmount!==receiveAmount){
//在这里处理
}
如果(prevAmount.sendAmount!==sendAmount){
//在这里处理
}
},[receiveAmount,sendAmount])
}

但是,如果您对要单独处理的每个更改id分别使用两个useffect,阅读和理解起来会更加清晰,可能会更好

发表评论