React购物车开发：图片重复渲染25次问题求助

问题描述 #

开发基于JSON数据库的购物车时，映射图片渲染到网页后，图片被重复渲染25次，次数与JSON文件中的数据条数一致。

现有代码 #

SingleProduct组件 #

import React from 'react';
import products from '../productData.json';
import './style.css';


const SingleProduct = () => {
  return (
    <div >
       {
          products.map((prod)=>
            <div  className="image">
              <img  src={prod.image} style={{width:"20%"}}  alt="logo" />
            </div>
          )
       }
    </div>
  )
}

export default SingleProduct

Home组件 #

import React from 'react'
import { CartState } from '../context/Context';
import './style.css';
import SingleProduct from './SingleProduct';
import Filters from './Filters';

const Home = () => {

  const { state:{products} } = CartState();
  

  return (
    <div className='home'>
      <Filters />
      <div className="productContainer"> 
      {
            products.map((prod)=>{
          return <SingleProduct prod={prod} key={prod.id} />
        })
      }

      </div>
    </div>
  )
}

export default Home

问题原因 #

SingleProduct组件内部自行导入完整的products数组并遍历渲染，同时Home组件又对products数组做了一次遍历，每次循环都渲染一个SingleProduct组件。这导致了双重遍历：Home循环25次生成25个SingleProduct，每个SingleProduct又循环25次渲染所有产品图片，最终出现图片重复渲染的问题。

解决方案 #

修改SingleProduct组件，移除内部的products数组导入和遍历逻辑，改为接收父组件传递的prod props，只渲染单个产品的图片：

import React from 'react';
import './style.css';

const SingleProduct = ({ prod }) => {
  return (
    <div className="image">
      <img src={prod.image} style={{width:"20%"}} alt="product" />
    </div>
  )
}

export default SingleProduct

说明 #

修改后，Home组件遍历products数组时，每次将单个prod对象传递给SingleProduct，组件仅渲染当前产品的图片，避免了重复遍历，图片渲染次数将与产品条数一致，不再重复。

内容的提问来源于stack exchange，提问作者Siva. subramanaian