为什么页面刷新后内容会被删除？

Question

我写了两个不同的函数，它们的工作方式应该非常相似。当主要元素发生变化时（我猜），“剧集”内容每次都会获取数据，因此速度较慢。另外两个，“字符”和“位置”元素在开头获取数据，仅此而已。 现在困扰我的是，当我刷新页面或在搜索栏中手动写一些“id”时，比如 episodes/5，然后它不会加载那个 episode/5，它只能在点击链接时工作。所以整个剧集列表都在那里，但第 5 集不会自动加载。但是，通过其他两个元素，就不存在这样的问题 我希望我的意思很清楚。

Main.js

import './main.css';
import { Routes, Route, Navigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import Episodes from '../Episodes/Episodes';
import Characters from '../Characters/Characters';
import Character from '../Character/Character';
import Locations from '../Locations/Locations';
import Location from '../Location/Location';
import Home from '../Home/Home';

export default function Main() {
  const [characters, setCharacters] = useState([]);
  const [locations, setLocations] = useState([]);

  useEffect(() => {
    (async function () {
      const resp = await fetch('https://rickandmortyapi.com/api/character');
      const data = await resp.json();
      setCharacters(data.results);
    })();
  }, []);

  useEffect(() => {
    (async function () {
      const resp = await fetch('https://rickandmortyapi.com/api/location');
      const data = await resp.json();
      setLocations(data.results);
    })();
  }, []);

  return (
    <div className='mainContent'>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/episodes/*' element={<Episodes />} />
        <Route path='/characters/*' element={<Characters list={characters} />} />
        <Route path='/locations/*' element={<Locations list={locations} />} />
        <Route path='*' element={<Navigate to='/' />} />
      </Routes>

      <Routes>
        <Route path='/characters/:id' element={<Character list={characters} />} />
        <Route path='/locations/:id' element={<Location list={locations} />} />
      </Routes>
    </div>
  );
}

Episodes.js

import './episodes.css';
import Episode from '../Episode/Episode';
import { Routes, Route, useLocation, NavLink } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

export default function Episodes() {
  const [episodes, setEpisodes] = useState([]);

  useEffect(() => {
    (async function () {
      const resp = await fetch('https://rickandmortyapi.com/api/episode');
      if (!resp.ok) throw new Error('No Episodes');
      const data = await resp.json();
      setEpisodes(data.results);
    })();
  }, []);

  function findEpisode(id) {
    return episodes.find((item) => +id === item.id);
  }
  return (
    <>
      <div className='results'>
        <h2>Episodes List</h2>
        {episodes.length === 0 && <p>No Episodes...</p>}
        {episodes.map((item) => (
          <p key={item.name}>
            <NavLink className='activeNavLink' to={`/episodes/${item.id}`}>
              {item.name}
            </NavLink>
          </p>
        ))}
      </div>

      <div className='details'>
        <Routes>
          <Route path='/:id' element={<Episode findEpisode={findEpisode} />}></Route>
        </Routes>
      </div>
    </>
  );
}

Episode.js（刷新页面或手动重写url后不会加载）

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

export default function Episode({ findEpisode }) {
  const [episode, setEpisode] = useState(null);
  const { id } = useParams();
  console.log(id);

  useEffect(() => {
    setEpisode(findEpisode(id));
  }, [id]);

  let details = (
    <>
      <p>{episode && episode.name}</p>
      <p>{episode && episode.episode}</p>
      <p>{episode && episode.air_date}</p>
    </>
  );
  return (
    <>
      <h2>Episode Details</h2>
      {episode && details}
    </>
  );
}

Characters.js

import './characters.css';
import { NavLink } from 'react-router-dom';

export default function Characters({ list }) {
  return (
    <>
      <div className='results'>
        <h2>Characters List</h2>
        {list.length === 0 && <p>No character...</p>}
        {list.map((item, index) => (
          <p key={item.name}>
            <NavLink className='activeNavLink' to={`/characters/${item.id}`}>
              {item.name}
            </NavLink>
          </p>
        ))}
      </div>
    </>
  );
}

Character.js

import { useParams } from 'react-router-dom';

export default function Character({ list }) {
  let params = useParams();
  const id = params.id;
  console.log(id, list);
  const character = list.find((char) => +char.id === +id);
  console.log(character);
  if (!character || !id) return '';
  return (
    <div className='charInfo'>
      <h2>Character Details</h2>
      <div className='charImage'>
        <img src={character.image} alt='Logo' />
      </div>
      <p>{character.name}</p>
    </div>
  );
}

Answer 1

这可能是问题所在：findEpisode 函数需要在您的依赖数组中，以便在 Episode.js 上调用 useEffect。

useEffect(() => {
  setEpisode(findEpisode(id));
}, [id,findEpisode]);

否则，您可能会卡在之前对具有 episodes === [] 的 findEpisode 函数的引用。

function findEpisode(id) {
  return episodes.find((item) => +id === item.id);
}

不确定它是否能解决您的问题，但这绝对是您需要解决的问题。