React: 重新加载页面不再获取数据了

Question

当我在主页上点击 "课程 "组件时，课程页面加载后，从url中获取课程的id，并从本地js文件中获取数据（从本地js文件中获取）来填充课程页面。好吧，这只发生在我从主页点击的时候。但是，当我已经在课程页面上填充了数据，并且我重新加载页面时，我从url中获取了id，但是这次数据显示为 "undefined"......。我不明白为什么不能像之前那样获取数据？

这是我的组件实现。

 const Lesson = () => {
  const { id } = useParams();
  const [lesson, setLesson] = useState(getLesson(id));

  console.log("id: ", id);
  console.log("lesson: ", lesson);

  return (...);
};

下面是我在主页上点击我的课程组件时的控制台。工作时的控制台

有控制台时，我只是重新加载课程页面。当它不工作时的控制台

我试着用useEffect()和里面的setLesson(getLesson(id))一起使用，但没有任何变化......我也试过这样做。

我也试过这个。

 if (id) lesson = getLesson(id);

但还是没有用... :()

getLesson()从这个名为fakeLessonsService.js的文件中获取数据。

 import getHipHopLessons from "./hipHopLessons";

 const lessons = [...getHipHopLessons()];

 export function getLesson(lessonId) {
    return lessons.find((lesson) => lesson._id === lessonId);
 }

".hipHopLessons "文件只是简单地返回一个课程对象数组.

getLesson()只在这个页面上加载。

Answer 1

useState的参数只在初始渲染时使用。

如果id发生变化，你应该使用useEffect来更新状态。

const [lesson, setLesson] = useState({});

useEffect(() => {
   getLesson(id).then(val => setLesson(val));

}, [id]);

PS. 请确保 getHipHopLessons 不是异步的

如果是异步，那么你必须写这样的代码，如

import getHipHopLessons from "./hipHopLessons";

 export async function getLesson(lessonId) {
    const lessons = getHipHopLessons();
    return lessons.find((lesson) => lesson._id === lessonId);
 }