![](/img/trans.png)
[英]Map function not working while passing props into React component (TypeScript, React and Next.js)
[英]Map function not working in React js component
我是 React js 的新手。 我正在尝试在存储在另一个名为 products.js 的文件中的数组上使用 map function,当我控制台记录它通过不显示在屏幕上显示的数据时。 这是我的组件代码:
import React from 'react'
import products from '../products'
import {Row,Col} from 'react-bootstrap'
const HomeScreen = () => {
console.log(products)
return (
<>
<h1>Latest Products</h1>
<Row>
{products.map(product => {
<h3 key={product._id}>{product.name}</h3>
})}
</Row>
</>
)
}
export default HomeScreen
这是 product.js 代码:
const products = [
{
_id: '1',
name: 'Airpods Wireless Bluetooth Headphones',
image: '/images/airpods.jpg',
description:
'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
brand: 'Apple',
category: 'Electronics',
price: 89.99,
countInStock: 10,
rating: 4.5,
numReviews: 12,
},
{
_id: '2',
name: 'iPhone 11 Pro 256GB Memory',
image: '/images/phone.jpg',
description:
'Introducing the iPhone 11 Pro. A transformative triple-camera system that adds tons of capability without complexity. An unprecedented leap in battery life',
brand: 'Apple',
category: 'Electronics',
price: 599.99,
countInStock: 7,
rating: 4.0,
numReviews: 8,
},
{
_id: '3',
name: 'Cannon EOS 80D DSLR Camera',
image: '/images/camera.jpg',
description:
'Characterized by versatile imaging specs, the Canon EOS 80D further clarifies itself using a pair of robust focusing systems and an intuitive design',
brand: 'Cannon',
category: 'Electronics',
price: 929.99,
countInStock: 5,
rating: 3,
numReviews: 12,
},
{
_id: '4',
name: 'Sony Playstation 4 Pro White Version',
image: '/images/playstation.jpg',
description:
'The ultimate home entertainment center starts with PlayStation. Whether you are into gaming, HD movies, television, music',
brand: 'Sony',
category: 'Electronics',
price: 399.99,
countInStock: 11,
rating: 5,
numReviews: 12,
},
{
_id: '5',
name: 'Logitech G-Series Gaming Mouse',
image: '/images/mouse.jpg',
description:
'Get a better handle on your games with this Logitech LIGHTSYNC gaming mouse. The six programmable buttons allow customization for a smooth playing experience',
brand: 'Logitech',
category: 'Electronics',
price: 49.99,
countInStock: 7,
rating: 3.5,
numReviews: 10,
},
{
_id: '6',
name: 'Amazon Echo Dot 3rd Generation',
image: '/images/alexa.jpg',
description:
'Meet Echo Dot - Our most popular smart speaker with a fabric design. It is our most compact smart speaker that fits perfectly into small space',
brand: 'Amazon',
category: 'Electronics',
price: 29.99,
countInStock: 0,
rating: 4,
numReviews: 12,
},
]
export default products
这是我的 App.js 代码:
import React from 'react'
import {Container} from 'react-bootstrap'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
const App=()=> {
return (
<>
<Header />
<main>
<Container className='py-3'>
<HomeScreen/>
</Container>
</main>
<Footer/>
</>
);
}
export default App;
为什么会这样? 我尝试查找一些解决方案但失败了。 谢谢你的帮忙
我认为问题是你需要在 h3 之前添加一个 return 语句:
<Row> {products.map(product => { return <h3 key={product._id}>{product.name}</h3> })} </Row>
在 map function 添加返回语句。
{products.map((product) => {
return <h3 key={product._id}>{product.name}</h3>;
})}
如果您想在不使用“return”的情况下这样做,有 2 个选项:选项 1:删除花括号
<Row>
{products.map(product => return <h3 key={product._id}>{product.name}</h3>)}
</Row>
选项 2:使用 () 而不是花括号(尤其是当您稍后要添加更多元素时)
<Row>
{products.map(product => (
<h3 key={product._id}>{product.name}</h3>
<...other html elements>
))}
</Row>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.