MERN栈应用触发RenderProductImage无渲染返回错误如何解决

根本原因 #

报错Nothing was returned from render是因为RenderProductImage组件存在多个执行路径没有返回React可识别的有效值（React组件不允许返回undefined，仅允许返回JSX、数组、null、字符串等合法值），具体问题如下：

• 调整后的RenderProductImage内判断逻辑使用props.productId，但调用时传入的属性是product={product}，参数名不匹配，判断逻辑永远不触发，最终函数返回undefined
• 即便进入图片匹配逻辑，如果没有图片匹配到选中的颜色，map遍历会返回全为undefined的数组，也会触发渲染错误
• colorPicker内直接调用RenderProductImage属于无效逻辑，React组件只能在JSX中声明渲染，事件内直接调用不会生效
• 所有map遍历渲染的DOM元素未添加唯一key属性，会触发React警告

修复步骤 #

1. 重写RenderProductImage组件，统一参数、添加兜底返回逻辑：

const RenderProductImage = ({ product }) => {
  // 基础判空，兜底返回null
  if (!product?.imageFile || !color?.length) return null;
  const colorCode = color[1]?.substring(1);
  // 先筛选匹配颜色的图片
  const matchedImgs = product.imageFile.filter(img => 
    img.originalname.includes(colorCode)
  );
  // 无匹配时返回默认图，也可根据需求返回null
  const renderImgs = matchedImgs.length ? matchedImgs : 
    product.imageFile.filter(img => img.originalname.includes('def'));
  
  return renderImgs.map(img => (
    <img 
      key={img.originalname}
      src={require(`./styles/images/${img.originalname}`).default} 
      alt="product img" 
    />
  ))
}

2. 保留当前的组件调用逻辑即可，参数传递与组件定义匹配：

{color.length > 0 ?
  <RenderProductImage product={product} />
  :
  <>
    {product.imageFile.map(image => {
      if(image.originalname.includes('def')) {
        return (
          <img 
            key={image.originalname}
            src={require(`./styles/images/${image.originalname}`).default} 
            alt="product img" 
          />
        )
      }
    })}
  </>
}

3. 删除colorPicker函数内无效的组件调用代码：

const colorPicker = ([productId, colors]) => {
  setColor([productId, colors])
  // 删掉下面这段无效逻辑
  // if(products.some(product => product._id === productId)) {
  //   RenderProductImage(products.find(product => product._id === productId))
  // }
}

内容的提问来源于stack exchange，提问作者Yollo