Question

React：props 未定义

2020-07-03

3262

javascript reactjs react-native

我在产品 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

将组件传递给路由的方式很重要。要访问 match，您需要使用 render prop 来解构 match。

<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>