反应：道具没有定义

Question

我在js产品中有以下代码，我正在尝试使用id参数在API调用上返回单个项目。跑步时，我得到的道具没有定义。我不知道该怎么解决

import React, {useEffect }from 'react';

import { detailsProduct } from '../actions/productActions';
  
function Productscreen(props) {

const productDetails = useSelector(state => state.productDetails);

const {product , loading, error } = productDetails;

const dispatch = useDispatch();
useEffect(() => {

  dispatch(detailsProduct(props.match.params.id));

  return () => {
    //
  }
}, [])

Answer 1

将组件传递到路线的方式很重要。要访问匹配项，您将需要渲染道具来破坏匹配项。

<Route path='/whatever/:id' render={({match}) => <Productscreen match={match} />} />

您也可以使用新的react router钩子useParams，我更喜欢它们，主要是因为Typescript。

import React, {useEffect } from 'react';
import { detailsProduct } from '../actions/productActions';
import { useParams } from "react-router-dom";

function Productscreen() {
    const productDetails = useSelector(state => state.productDetails);
    const {product , loading, error } = productDetails;

    let { id } = useParams()

    const dispatch = useDispatch();

    useEffect(() => {
         dispatch(detailsProduct(id));`

          return () => {
                //
          }
    }, [])
}

在这种情况下，您的路线应为：

<Route path="/whateverpath/:id">
  <Productscreen/>
</Route>