在useEffect中反应路由器history.push，两次渲染

Question

为什么 App 组件每次位置改变都会渲染两次？

这里的想法是，当位置或语言更改时，useEffect 回调会将匹配的查询字符串添加到 url。

const App = () => {
  const history = useHistory()
  const loc = useLocation()
  const [language, setLanguage] = useState("en")

  useEffect(() => {
    history.push({pathname: window.location.pathname, search: '?lang=' + language})
  }, [language, loc.pathname])

  return(Some components here)

Answer 1

您正在更新您的位置，它是 useEffect 的依赖项数组中的值之一。这就是造成双重渲染的原因。

如果您想避免这种情况，请尝试将前一个位置存储在 ref 中并在 history.push 之前比较两者