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

Question

I'm using React Router with my React dictionary project, and for some reason my page doesn't re-render after I run history.push() (using the useHistory hook from react-router). I have a search bar, and I use this function to go to a new link.

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

My App component looks like this:

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

This is what the DictionaryEntryPage component is:

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

  ...
}

Let me know what I should add to/remove from the question, and here 'sa demo link if someone want to see it.

Answer 1

I think you'll actually find that your component is re-rendering properly. The issue is with your useEffect , rather than an issue with rendering.

In your useEffect , you have an empty dependencies array at the end [] . By having an empty dependencies array, you are essentially telling React that nothing will ever change and cause this side effect to re run (which is not the case). If that is truly your desire, and you only want the side effect to run when the component first mounts, you should remove the dependencies array altogether, which would cause your code to look like this:

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

What you really want, though, is to actually cause that effect to re-run every time the search term changes. Leaving everything else about your useEffect the same, that'd give you this:

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

The above still has some problems, though. Namely, match is an object, which means it's a reference type. When deciding whether or not to re-run a side effect, React only does shallow comparisons rather than deeply inspecting reference types to see if they are equal (check out this article for a better explanation of reference vs value types). Basically, if you leave the useEffect like that, you'll be running the effect too much and probably get yourself lots of rate limit errors from your API.

So, the final example of what you want is this:

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

  //...
}

Now you're extracting the requestedWord (which is a string and therefore a value type) at render and your useEffect simply has a dependency on that string. Now your effect will be making the correct number of requests to the API and it won't have stale data about the requested word.

As an aside, I'd strongly recommend that you install the eslint-plugin-react-hooks and add it to your .eslintrc.json and extend from it. It has a rule called exhaustive-deps which would have caught this and warned you ahead of time.

Additional reading about exhaustive dependencies: https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function