javascript - “产品”已定义但从未在 react 中使用？

Question

我正在尝试使用高阶函数从另一个文件获取信息。我使用了三个文件。我的 SchoolProduct.js 文件是一个包含对象的数组，第二个是我的 Product.js 组件。我将这个文件用于 Prop 。第三个文件 App.js 是神奇的地方。我不断收到错误消息。 “产品”已定义但从未使用。我很清楚这意味着什么，但我一直在研究我的代码，但没有任何运气。我想将所有对象元素显示到屏幕上，这很简单。这是我的代码。

App.js 文件

import React from 'react'
import SchoolProducts from "./SchoolProducts.js"
import Product from "./component/Product.js"

function App() {
  const OurProducts = SchoolProducts.map(
    Product => <Product key={"1"} name={Product.name} description={Product.description}/>
  )

  return (
    <div>
      {OurProducts}
    </div>
  )
}

export default App;

Product.js 文件

import React from "react"

function Product(props) {
  return (
    <div>
      <h3>{props.Product.name} </h3>
      <h3> {props.Product.price}</h3>
      <h3> {props.Product.description}</h3>
    </div>
  )
}

export default Product

SchoolProducts.js 文件

const SchoolProducts = [ {
    id: "1",
    name: "pencil",
    description: "Perfect for those who cant remember things"
},
{
    id: "2",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

},
{
    id: "3",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

},
{
    id: "4",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

},
{
    id: "5",
    name: "pencil",
    price: 1,
    description: "Perfect for those who cant remember things"

}


]

export default SchoolProducts

Answer 1

您在不同的作用域中使用相同的变量名 - 顶层的 Product 是 React 组件，但 SchoolProducts 包含对象数组，因此与 SchoolProducts.map(Product =>) 一起，在 .map 中，Product 指的是一个普通对象。

使用不同的变量名称:

const OurProducts = SchoolProducts.map(SchoolProduct => (
  <Product key={"1"} name={SchoolProduct.name} description={SchoolProduct.description}
    />
));

或者立即解构:

const OurProducts = SchoolProducts.map(({ name, description }) => (
  <Product key={"1"} name={name} description={description}
    />
));

(您可以通过强制执行 no-shadow ESLint 规则来避免犯此类错误)