面试题：React中如何在动态路由参数变化时更新组件数据

Question

假设你有一个基于React Router的应用，定义了一个动态路由 `/user/:userId`。当 `userId` 参数发生变化时，组件如何获取新的 `userId` 并更新相应的数据？请给出代码示例。

Answer 1

在React Router中，当userId参数发生变化时，组件可以通过useParams钩子函数来获取新的userId并更新数据。以下是代码示例：

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

const User = () => {
  const { userId } = useParams();
  useEffect(() => {
    // 在这里根据新的userId获取数据
    const fetchData = async () => {
      // 模拟获取数据的异步操作
      const response = await fetch(`https://example.com/api/users/${userId}`);
      const data = await response.json();
      console.log(data);
    };
    fetchData();
  }, [userId]);

  return (
    <div>
      <p>User ID: {userId}</p>
    </div>
  );
};

export default User;

在上述代码中：

1. 通过useParams钩子获取userId。
2. 使用useEffect钩子，当userId变化时，触发副作用函数来获取新的数据。useEffect的依赖数组为[userId]，这样每当userId变化时，useEffect内的代码就会重新执行。