React js 中未捕获的 TypeError答案

【问题标题】：Uncaught TypeError in React jsReact js 中未捕获的 TypeError
【发布时间】：2022-10-19 05:01:26
【问题描述】：

渲染组件时出现以下错误

ProductReviews 组件中出现上述错误：
未捕获的类型错误：productReviews 未定义

这是 Appjs 组件

import "./App.css";
import PreNavbar from "./Components/PreNavbar";
import Navbar from "./Components/Navbar.js";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Slider from "./Components/Slider.js";
import Offers from "./Components/Offers.js";
import data from "./data/data.json";
import Heading from "./Components/Heading.js";
import StarProduct from "./Components/StarProduct.js";
import HotAccessoriesManu from "./Components/HotAccessoriesManu.js";
import HotAccessories from "./components/HotAccessories.js";
import ProductReviews from "./Components/ProductReviews.js";


function App() {
  return (
    <Router>
      <PreNavbar />
      <Navbar />
      <Slider start={data.banner.start} />
      <Offers offer={data.offer} />
      <Heading text="STAR PRODUCTS" />
      <StarProduct starProduct={data.starProduct} />
      <Heading text="HOT ACCESSORIES" />
      <HotAccessoriesManu />

      <Routes>
        <Route
          exact
          path="/music"
          element={
            <HotAccessories
              music={data.hotAccessories.music}
              musicCover={data.hotAccessoriesCover.music}
            />
          }
        />
        <Route />

        <Route
          exact
          path="/smartDevice"
          element={
            <HotAccessories
            smartDevice={data.hotAccessories.smartDevice} smartDeviceCover={data.hotAccessoriesCover.smartDevice}
            />
          }
        />
        <Route />

        <Route exact path="/home" element={ <HotAccessories home={data.hotAccessories.home} homeCover={data.hotAccessoriesCover.home} /> }/>
        <Route />

        <Route exact path="/lifestyle" element={ <HotAccessories lifeStyle={data.hotAccessories.lifeStyle} lifeStyleCover={data.hotAccessoriesCover.lifeStyle} /> }/>
        <Route />

        <Route exact path="/mobileAccessories" element={ <HotAccessories mobileAccessories={data.hotAccessories.mobileAccessories} mobileAccessoriesCover={data.hotAccessoriesCover.mobileAccessories} /> }/>
        <Route />
      </Routes>
      <Heading text="PRODUCT REVEWIES"/>
      <ProductReviews ProductReviews={data.productReviews}/>
      

     
    </Router>
  );
}

export default App;

这是 productReviews 组件

import React from 'react'
import ProductReviewCard from "./ProductReviewCard.js"

const ProductReviews = ({productReviews}) => {
    return (
        <div className="ProductReviews">
           
        {productReviews.map((item,index)=>(

<ProductReviewCard price={item.price} name={item.name} image={item.image} review={item.review} index={index} key={item.image} />


        ))}
             
        </div>
    )
}

export default ProductReviews

这是 productReviewCard 组件

import React from 'react'

const ProductRevieweCard = ({image, index, price, name, review}) => {
  return (
    <div className='ProductRevieweCard'>
        <image src={image} alt={`${index} review`} />
        <h5>{review}</h5>
        <span>{name}</span>
        <b>{price}</b>

    </div>
  )
}

export default ProductRevieweCard

正如我看到的一切都好，但我不知道为什么它不渲染

【问题讨论】：

问题来自使用 ProductReviews 组件的父组件。
先生，我现在添加了父组件你能告诉我为什么显示.....没有定义

标签： javascript reactjs react-hooks

【解决方案1】：

Router 组件中 App.js 中 ProductReviews 组件的 propName 中有错字。请试试这个 - ProductReviews 道具中的“p”应该是小写，这就是你得到undefined的原因。

<ProductReviews productReviews={data.productReviews}/>

【讨论】：