Question

未捕获的类型错误：无法读取未定义的属性（读取‘params’）-React

2022-03-21

1893

javascript reactjs parameters

我不确定我在这里遗漏了什么。我搜索了一些有关此错误的信息，但我找不到任何可以解决我的错误的内容。主屏幕页面将呈现所有图像。在此之前，单击单个图像时，它将打开一个新页面来显示该图像。我试图做的是，单击图像时，我想要该图像以及该图像的详细信息。我得到的只是一个空白页，其中包含开发工具上的错误（见下文）。提前谢谢您...

ProductScreen.js:18 未捕获的类型错误：无法读取未定义的属性（读取“params”）

这是代码：

import React, { useEffect } from 'react';
import Rating from '../components/Rating';
import { Link, useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import { detailsProduct } from '../actions/productActions';

function ProductScreen(props) {


  const dispatch = useDispatch();

  const { id } = useParams();
  console.log("A", id);
  const productId = props.match.params.id; // this is the error as per dev tools
  console.log(props.match.params.id);

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

  const { loading, error, product } = productDetails;

  useEffect = (() => {
    dispatch(detailsProduct(productId));
  }, [dispatch, productId]);

 return (

 //code here

  )
}

export default ProductScreen;


  [1]: https://i.sstatic.net/jdshU.png

Answer 1

看来，您在创建 productscreen 的JSX元素时，您没有传递Props 匹配。这条线将看起来像

108588414

as 还应检查该值是否不确定。

Answer 2

@mushroomator

这是我的 JSX...

return (

    <div>

      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (

        <div>
          <Link to="/">Back To Result</Link>
          <div className="row top">
            <div className="col-2">
              <img className="large" src={product.image} alt={product.name} ></img>
            </div>

            <div className="col-1">
              <ul>
                <li>
                  <h1>{product.name}</h1>
                </li>

                <li>
                  <Rating
                    rating={product.rating}
                    numReviews={product.numReviews}
                  >
                  </Rating>
                </li>

                <li>
                  Price: ${product.price}
                </li>

                <li>
                  Description:
                  <p>{product.description}</p>
                </li>
              </ul>
            </div>

            <div className="col-1">
              <div className="card card-body">
                <ul>
                  <li>
                    <div className="row">
                      <div>Price</div>
                      <div className="price">${product.price}</div>
                    </div>
                  </li>

                  <li>
                    <div className="row">

                      <div>Status</div>
                      <div>
                        {product.countInStock > 0 ? (
                          <span className="success">In Stock</span>
                        ) : (
                          <span className="danger">Unavailable</span>
                        )}
                      </div>
                    </div>
                  </li>

                  <li>
                    <button className="primary block">Add to Cart</button>
                  </li>
                </ul>
              </div>

            </div>
          </div>
        </div>
      )}
    </div>
 )
}

export default ProductScreen;