假设我有3个输入:rate、sendAmount和receiveAmount。我把这3个输入放在Useffect扩散参数上。这些规则是:
- 如果sendAmount发生了变化,我将计算
receiveAmount=sendAmount*费率 - 如果receiveAmount发生变化,我将计算
sendAmount=receiveAmount/费率 - 如果费率发生变化,我会在
sendamunt>;时计算或当receiveAmount=sendamunt*rate;0receiveAmount>;0
这是代码沙盒https://codesandbox.io/s/pkl6vn7x6j 来演示这个问题
是否有一种方法可以比较componentDidUpdate上的oldValues和newValues而不是为这种情况创建3个处理程序
谢谢
这是我使用usePrevious
https://codesandbox.io/s/30n01w2r06
在这种情况下,我不能使用multipleuseffect,因为每次更改都会导致相同的网络调用。这就是为什么我也使用changecont来跟踪更改。这changecont也有助于仅从本地跟踪更改,因此我可以防止由于服务器的更改而进行不必要的网络调用
您可以使用useRef
函数usePrevious(值){
const ref=useRef();
使用效果(()=>{
参考电流=值;
});
返回参考电流;
}
然后在useffect
常量组件=(道具)=>;{
常量{receiveAmount,sendAmount}=props
const prevAmount=usePrevious({receiveAmount,sendAmount});
使用效果(()=>{
如果(PreviveAmount.receiveAmount!==receiveAmount){
//在这里处理
}
如果(prevAmount.sendAmount!==sendAmount){
//在这里处理
}
},[receiveAmount,sendAmount])
}
但是,如果您对要单独处理的每个更改id分别使用两个useffect,阅读和理解起来会更加清晰,可能会更好