reactjs 为什么React-router不重新呈现页面，也不更新数据时，网址改变？

3duebb1j 于 2023-02-18 发布在 React

关注(0)|答案(2)|浏览(121)

我在React中构建了一个项目，通过一个自定义钩子从API中检索数据，一旦检索到数据，它就会显示卡片，点击卡片可以打开描述页面。

// App.js
<Routes>
   <Route path="/" element={<Home />} /> // cards list
   <Route path="/:eleId" element={<Details />} /> // description page 
</Routes>

// Home.jsx with single card
<div className="container">
   <Link to={`/${eleId}`}>
      <Card />
   </Link>
</div>

我的问题来了：在描述页面内，我有相关链接，单击时会打开同一页面，但会更改数据：
x一个一个一个一个x一个一个二个x
网址更改正确，但数据没有更新...但如果我刷新它更新。
我不明白为什么React不能重新呈现页面。谁能给我一些建议吗？
谢谢你：）

reactjs

来源：https://stackoverflow.com/questions/71035560/why-react-router-doesnt-re-render-the-page-and-doesnt-update-the-data-when-the

2条答案

按热度按时间

hk8txs481#

// Details.jsx description page 
<div className="description">
  <p>BLa bla bla</p>
  <Link to={`/${eleId}`}>Related</Link>
<div>

如果Details组件链接到自身，即呈现它的路由，这意味着路由路径已经被匹配，并且呈现x1M1N1X。x1M2N1X可能需要"监听" x1M3N1X路由匹配参数的改变。使用useParams React钩子访问eleId参数，使用useEffect钩子（将eleId作为依赖项）在参数更新时运行任何必要的副作用。
示例：

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

...

const Details = () => {

  const { eleId } = useParams();
  const [data] = useData(`alpha/${eleId}`);

  ...

  useEffect(() => {
    // Business logic to run when eleId updates
  }, [eleId]);

  ...

对于useData钩子，将url声明移到useEffect钩子中，并添加param参数作为效果的依赖项。当参数更改时，将重新触发useEffect并重新获取数据。

const useData = (param = 'all') => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
    
  useEffect(() => {
    const url = 'https://restcountries.com/v2/' + param;

    const fetchAPI = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setError(false);
      } catch(err) {
        setError(err.message);
        setData(null);
        console.log(err);
      }
      setIsLoading(false);
    };
    fetchAPI(); 
  }, [param]);

  return [data, error, isLoading];
}

赞(0）回复(0）举报 2023-02-18

q8l4jmvw2#

从useparams中获取id，并使提取数据的使用效果对此id敏感。

赞(0）回复(0）举报 2023-02-18