history.push() 后页面不重新渲染

Question

我在我的 React 字典项目中使用 React Router，由于某种原因，在我运行 history.push()（使用 react-router 中的 useHistory 挂钩）后，我的页面没有重新呈现。我有一个搜索栏，我使用此功能转到一个新链接。

const KeyPressHandler: KeyboardEventHandler<HTMLInputElement> = (event) => {
    const { value } = event.currentTarget;
    if ((event.code === "Enter" || event.code === "NumpadEnter") && value.length)
      history.push(`/dictionary/${value}`);
    };
  };

我的App 组件如下所示：

const App = (): JSX.Element => {
  ...
  return (
    ...
      <Route path="/dictionary" component={DictionaryEntryPage} />
    ...
  );
};

这就是DictionaryEntryPage 组件：

const DictionaryEntryPage = (): JSX.Element => {
  const [wordData, setWordData] = useState<WordData[] | undefined | null>(undefined);
  // useRouteMatch is imported from react-router
  const match = useRouteMatch<{ requestedWord: string }>("/dictionary/:requestedWord");

  useEffect(() => {
    const { requestedWord } = match?.params ?? {};

    if (requestedWord) {
      (async () => {
        const data = await parseWordData(requestedWord);
        setWordData(data || null);
      })();
    } else setWordData(null);
  }, []);
  
  const wordDataEls = wordData ? wordData.map((data, i) => <Word {...data} key={i} />) : <Loading />;

  ...
}

让我知道我应该在问题中添加/删除什么，如果有人想看的话，here 是一个演示链接。

Answer 1

我认为您实际上会发现您的组件正在正确地重新渲染。问题在于您的 useEffect，而不是渲染问题。

在您的useEffect 中，[] 末尾有一个空的依赖项数组。通过拥有一个空的依赖项数组，您实际上是在告诉 React，什么都不会改变并导致这种副作用重新运行（事实并非如此）。如果这确实是您的愿望，并且您只希望在组件首次挂载时运行副作用，则应完全删除依赖项数组，这将导致您的代码如下所示：

useEffect(() => {
    const { requestedWord } = match?.params ?? {};
    console.log('ran effect');
    if (requestedWord) {
      (async () => {
        const data = await parseWordData(requestedWord);
        setWordData(data || null);
      })();
    } else setWordData(null);
  });

但是，您真正想要的是在每次搜索词更改时实际使该效果重新运行。将您的 useEffect 的其他所有内容保持不变，这将给您：

useEffect(() => {
    const { requestedWord } = match?.params ?? {};
    console.log('ran effect');
    if (requestedWord) {
      (async () => {
        const data = await parseWordData(requestedWord);
        setWordData(data || null);
      })();
    } else setWordData(null);
  }, [
      match
  ]);

尽管如此，上面仍然存在一些问题。也就是说，match 是一个对象，这意味着它是一个引用类型。在决定是否重新运行副作用时，React 仅进行 浅 比较，而不是深入检查引用类型以查看它们是否相等（查看 this article 以更好地解释引用与值类型）。基本上，如果您像这样离开useEffect，您将运行效果太多，并且可能会从您的 API 中得到很多速率限制错误。

所以，你想要的最终示例是这样的：

const DictionaryEntryPage = (): JSX.Element => {
  const [wordData, setWordData] = useState<WordData[] | undefined | null>(undefined);
  const match = useRouteMatch<{ requestedWord: string }>("/dictionary/:requestedWord");
  const { requestedWord } = match?.params ?? {};

  useEffect(() => {
    console.log('ran effect');
    if (requestedWord) {
      (async () => {
        const data = await parseWordData(requestedWord);
        setWordData(data || null);
      })();
    } else setWordData(null);
  }, [
    requestedWord
  ]);

  //...
}

现在您在渲染时提取requestedWord（它是一个字符串，因此是一个值类型），而您的useEffect 只是依赖于该字符串。现在您的效果将是向 API 发出正确数量的请求并且它不会包含有关所请求单词的陈旧数据。

顺便说一句，我强烈建议您安装 eslint-plugin-react-hooks 并将其添加到您的 .eslintrc.json 并从中扩展。它有一个名为exhaustive-deps 的规则，它会发现这一点并提前警告你。

关于详尽依赖的补充阅读：https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function