点击「返回列表」为何跳转至首页？（React Hooks场景）

问题原因 #

当前点击「返回列表」按钮时，执行的是setPokemon(pokemon.name)，这会将状态设置为当前Pokemon的名称（非null值）。而App组件的渲染逻辑是：当pokemon有值时显示详情页，仅当pokemon为null时才会渲染列表页，因此按钮无法回到列表。

修正方案 #

将「返回列表」按钮的onClick回调改为传入null，重置状态至初始值，触发App组件渲染列表页。

错误代码：

<a href="#" onClick={() => setPokemon(pokemon.name)}>
  Back to the list
</a>

修正后代码：

<a href="#" onClick={() => setPokemon(null)}>
  返回列表
</a>

完整修正代码 #

import "./styles.css";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import axios from "axios";
import { useState } from "react";

const queryClient = new QueryClient();

function App() {
  // useEffect(() => {
  //   queryClient.clear();
  // }, []);

  const [pokemon, setPokemon] = useState(null);
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        {pokemon ? (
          <Pokemon pokemon={pokemon} setPokemon={setPokemon} />
        ) : (
          <PokemonList setPokemon={setPokemon} />
        )}
      </div>
    </QueryClientProvider>
  );
}

export default App;

function usePokemonList() {
  return useQuery("pokemon", async () => {
    const { data } = await axios.get(
      "https://pokeapi.co/api/v2/pokemon?offset=0&limit=50"
    );
    return data.results;
  });
}

function usePokemon(name) {
  return useQuery(["pokemon", name], async () => {
    const { data } = await axios.get(
      `https://pokeapi.co/api/v2/pokemon/${name}`
    );
    return data;
  });
}

function Pokemon({ pokemon, setPokemon }) {
  const { isLoading, data } = usePokemon(pokemon);
  return (
    <div>
      <a href="#" onClick={() => setPokemon(null)}>
        返回列表
      </a>
      {isLoading ? (
        <p>加载中...</p>
      ) : (
        <div>
          <h1>{pokemon}</h1>
          <img src={data.sprites.front_default} alt={pokemon} />
        </div>
      )}
    </div>
  );
}

function PokemonList({ setPokemon }) {
  const { isLoading, data } = usePokemonList();
  return (
    <div>
      {isLoading ? (
        <p>加载中...</p>
      ) : (
        <ul>
          {data.map((pokemon) => (
            <li key={pokemon.name}>
              <a onClick={() => setPokemon(pokemon.name)} href="#">
                {pokemon.name}
              </a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者bosari