在基于 useEffect 的 setState 之后使用 react-router-dom 导航

Question

我正在使用react-storage-hooks，它提供了一种使用localStorage 获得全局状态的方法。在内部，调用 setValue 函数似乎要等到使用 useEffect 进行下一次渲染。这是一个问题，因为我想设置这个本地存储值并立即使用react-router-dom 以编程方式导航到不同的页面。

这是一个简化的例子

import React from 'react';
import { useHistory } from 'react-router-dom';
import { useStorageState } from 'react-storage-hooks';

export function Example() {
  const history = useHistory();

  // I'm ignoring writeError as it isn't relevant for this example
  const [value, setValue, writeError] = useStorageState<string>(
    localStorage,
    'test',
    'initial value'
  );

  return (
    <div>
      <p>Current Value: {value}</p>
      <button
        onClick={() => {
          // Set value to a new value 
          // This operation is delayed until the next render with useEffect internally
          setValue('new value');
          // Navigate to a different page after setting the value
          history.push('/');
        }}
      >
        Click Me
      </button>
    </div>
  );
}

我正在考虑有一个额外的 useState 变量，称为 navigateOut，因此我可以在下一次渲染时通过 if (navigateOut) history.push(); 调用简单地调用它，而不是直接调用 history.push()，但这似乎有点混乱。

如果 setValue 有某种基于回调/承诺的 API，这可能会更容易，但情况似乎并非如此。所以我想我的问题是，解决这个问题的惯用/基于钩子的方法是什么？

编辑：我意识到我忘了在我的例子中指定一些东西。我需要区分简单地修改值和修改+导航。如，我应该能够在不重定向的情况下设置值，除非我指定它这样做。

Answer 1

setValue 确实有你的 cmets 中提到的一种回调，添加一个只有在值更改时触发的使用效果才能解决你的问题

useEffect(() => {
history.push('/');
}, [value]); // This will only listen to changes on value

见https://reactjs.org/docs/hooks-effect.html