gpt4 book ai didi

reactjs - React 重写 useEffect 中的 componentWillReceiveProps

转载 作者:行者123 更新时间:2023-12-05 08:26:10 25 4
gpt4 key购买 nike

所以我正在用钩子(Hook)重写一个组件,我遇到了一个有趣的挑战,我需要用 useEffect 钩子(Hook)模仿 componentWillReceiveProps 的一些旧行为。

我的旧代码如下:

componentWillReceiveProps(nextProps: Props) {

const prevLateVal = get(`lateMinutes[${bookingId}].value`, this.props);
const nextLateVal = get(`lateMinutes[${bookingId}].value`, nextProps); //see here,
//we use next props

if (typeof nextLateVal !== 'undefined' && prevLateVal !== nextLateVal) {
client.connect(bookingId, nextLateVal === null ? 0 : nextLateVal);

}
}

你看,我正在启动一个基于 nextProps 的 const,然后在 if 语句中我根据那个 nextVal 做了几个检查,现在,我知道我们可以为 useEffect 指定第二个参数,以便仅在 prop 发生变化时运行它,但是那些检查呢,我如何实现类似于 nextProps 的东西?

最佳答案

您可以创建自定义 Hook :

function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.prevLateVal = value;
});
return ref.prevLateVal;
}

并在 useEffect()

中使用它
const Component = (props) => {
const currentLateValue = get(`lateMinutes[${bookingId}].value`, props)
const prevLateVal = usePrevious(currentLateValue);
useEffect(() => {
if(prevLateVal !== currentLateValue) {
// process here
}
}, [currentLateValue]) // This will be executed only if currentLateValue changes.
}

关于reactjs - React 重写 useEffect 中的 componentWillReceiveProps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57821167/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com