时间戳

首页 > 解决方案 > react中的动态路由和生命周期

javascript - react中的动态路由和生命周期

问题描述

我正在使用动态路由进行反应。我正在从第三方 API 获取一些数据。我有我的动态路线是这样的

<Route path="/:id" component = {item} />

在 item 组件中，我获取值params.id并使用该 id 来获取我的数据

componentDidUpdate(){ fetchData(this.props.match.params.id);}

我现在遇到的问题是，每当我尝试/:id从 Item 组件访问另一条相同格式的路由时，params 都会更改为传递的新 id，但仍保留旧 id 的旧内容。我相信 componentDidmount 没有被调用，因为我在同一个项目组件中。该组件没有重新安装，而是刚刚更新。我能做些什么？

标签： javascriptreactjs

解决方案

componentDidMount您必须在类组件中以及在componentDidUpdate类组件中进行 api 调用。获取数据后，您必须将其设置为组件状态才能直观地看到它。

componentDidmount() {
  fetchData(this.props.match.params.id);
}

componentDidUpdate(prevProps, prevState){
  if(prevProps.match.params.id !== this.props.match.params.id) {
    fetchData(this.props.match.params.id);
  }
}

如果您更愿意使用反应挂钩 + 功能组件，这将为您简化。您可以使用useState该状态来维护数据。

import React, { useEffect } from "react";
const YourComponent = props => {
    const { id } = props.match.params;
    // This will run every time id changes.
    useEffect(() => {
        fetchData(id);
    }, [id]); 

    return (
        <>
            Your api call
        </>
    );
};

推荐阅读