Dav*_*ein 5 reactjs react-hooks react-hooks-testing-library
我有一个钩子useEffect。我注意到useEffect运行的次数不会超过两次,因为在一次rerender使用不同数据的调用之后,后续调用不会获取更新的数据。
export default function(lookForUsername) {
const [dashboardHref, setDashboardHref] = useState(`https://www.example.com/`);
useEffect(() => {
// this is where I have code that i want to
// run on re-render, but it won't because it stops getting updated
}, [lookForUsername]);
return [dashboardHref];
}
Run Code Online (Sandbox Code Playgroud)
我的测试发生了这种情况
// this will log false, false on first run
const { rerender, waitForNextUpdate } = renderHook((lookForUsername=false, otherOption=false) => {
console.log(lookForUsername, otherOption);
return useMyHook(lookForUsername);
});
console.log('first re-render');
// this will make the console say true, false
rerender(true, true);
console.log('second re-render');
// console will still say true, false
rerender(false, false);
console.log('third re-render');
// console will stay true, false (so it's not just one behind)
rerender(true, true);
Run Code Online (Sandbox Code Playgroud)
我不明白为什么使用不同的值重新渲染会第一次更新 renderHook 中的 props,但不会更新后续的时间。
注意 我已经更新了标题和问题措辞,以便在更多调试后更好地反映问题
更新 我过度简化了我的例子。我最初只在这篇文章中传递一个参数,但问题是当我传递多个参数时
将提供答案,但如果 Mike Peyper 发帖,我会将其标记为解决方案,因为他在https://github.com/mpeyper/react-hooks-testing-library/issues/75上将其提供给了我。
去引用:
这不会按预期工作,因为只有第一个参数传递给钩子回调。通常您会传递一个具有多个键的对象并在回调中对其进行解构:
const { rerender } = renderHook(({ a, b, c }) => useSomeHook(a, b, c))
rerender({ a, b, c})
Run Code Online (Sandbox Code Playgroud)
这样做的原因是它应该模仿包装组件的道具。
| 归档时间: |
|
| 查看次数: |
1364 次 |
| 最近记录: |