尝试使用 React 获取 useParams() 函数时未定义

时间:2021-05-19 06:10:46

标签: javascript reactjs react-router-dom

我想获得 useParams 值,但是我获得了一个未定义的值...我不知道为什么,因为我在 path='/investment/:id' 中使用了 params id

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import AdminLayout from 'layouts/Admin/Admin.js';

import 'assets/scss/black-dashboard-react.scss';
import 'assets/demo/demo.css';
import 'assets/css/nucleo-icons.css';
import '@fortawesome/fontawesome-free/css/all.min.css';

import ThemeContextWrapper from './components/ThemeWrapper/ThemeWrapper';
import BackgroundColorWrapper from './components/BackgroundColorWrapper/BackgroundColorWrapper';
import InvestmentDetails from 'views/InvestmentDetails';

ReactDOM.render(
  <ThemeContextWrapper>
    <BackgroundColorWrapper>
      <BrowserRouter>
        <Switch>
          <Route path='/investment/:id' exact component={InvestmentDetails} />
          <Route path='/admin' render={(props) => <AdminLayout {...props} />} />
          <Redirect from='/' to='/admin/dashboard' />
        </Switch>
      </BrowserRouter>
    </BackgroundColorWrapper>
  </ThemeContextWrapper>,
  document.getElementById('root')
);

// InvestmentDetails.js
import React, { useEffect } from 'react';
import { fetchInvestments } from 'services/Investments';
import { Col, Row } from 'reactstrap';
import { useParams } from 'react-router-dom';

const InvestmentDetails = () => {
  const { id } = useParams();
  useEffect(() => {
    const getInvestmentDetails = async () => {
      const investment = await fetchInvestments(id);
      console.log(id);
    };
    getInvestmentDetails();
  }, []);
  return (
    <>
      <div className='content'>
        <Row>
          <Col md='12'>
            <h1>{id}</h1>
          </Col>
        </Row>
      </div>
    </>
  );
};

export default InvestmentDetails;



// the fetchInvestments function
export async function fetchInvestments(id = '') {
  const response = await fetch(`http://localhost:3000/products/${id}`);
  return await response.json();
}

希望大家能帮帮我

2 个答案:

答案 0 :(得分:0)

编辑

查看您的代码,我认为问题与您的 API 调用有关。我认为您应该指向端口 5000 而不是 3000,因为我看到您在 app.js 中提到了它

原创

我真的没有发现这有什么问题,因为我以前写过这样的代码。我唯一能想到的改变是编写您的使用效果,将 id 作为依赖项包含在内,以便它仅在有 id 时运行。

 useEffect(() => {
    const getInvestmentDetails = async () => {
      const investment = await fetchInvestments(id);
      console.log(id);
    };
    getInvestmentDetails();
  }, [id]);

答案 1 :(得分:0)

在搜索您的代码后,我没有看到任何导航到“/investment/:id”路径的内容,但发现 investimentos 选项卡呈现 InvestmentList 组件并链接到 {{ 1}} 路径。我还发现 "/admin/investment/:id" 组件似乎为 Admin 中定义的任何路由添加了 "/admin" 前缀,这些路由指定了 routes.js 的布局值。

当我手动点击“/investment/:id”路径("/admin")时,我能够看到路线 "/investment/1234" 参数(即 { {1}}) 在 id 组件中。

我认为你的路由器只需要更新它试图匹配的投资细节的路径。

routes.js

1234

InvestmentList 投资链接:

InvestmentDetails

index.js with router:更新路径前缀以包含 { path: '/investment/', name: 'Novo Investimento', // rtlName: 'لوحة القيادة', icon: 'tim-icons icon-wallet-43', component: InvestmentDetails, layout: '/admin', },

<Link to={`/admin/investment/${inves.id}`}>
  {inves.name}
</Link>