4

我有一个钩子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];
}

我的测试发生了这种情况

// 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);

我不明白为什么用不同的值重新渲染会在第一次更新 renderHook 中的道具，但不是随后的时间。

注意 我已经更新了标题和问题的措辞，以便在更多调试后更好地反映问题

更新 我过度简化了我的例子。我最初在这篇文章中只传递了一个参数，但问题是当我传递多个参数时

4

1 回答 1

2

将提供答案，但如果 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})

这样做的原因是它应该模仿包装组件的道具。

于 2019-05-17T14:11:04.770 回答