Node.js 错误：渲染未返回任何内容。。。在MERN栈中的应用

我正在尝试渲染与所选颜色相同的图片，但由于某些原因，出现以下错误：

未捕获错误：RenderProductImage（…）：未从中返回任何内容 提供。这通常意味着缺少返回语句。或者 不呈现任何内容，返回null

以下是我的职能：

const {productData} = useContext(ProductContext);
const [products, setProducts] = useState([]);
const [color, setColor] = useState([]);

const ParsedColors = props => {
        return(
            props.product.color.map(col => {
                const parsed = JSON.parse(col)
                return(
                    <button name="color" value={parsed.value} style={{backgroundColor: `${parsed.value}`}} onClick={() => colorPicker([props.product._id, parsed.value])}/>
                )
            })
        )
    }

    const colorPicker = ([productId, colors]) => {
        setColor([productId, colors])
        if(products.some(product => product._id === productId)) {
            RenderProductImage(products.find(product => product._id === productId))
        }
    }

    const RenderProductImage = (product) => {
        return(
            product.imageFile?.map(image => {
                if(image.originalname.includes(color[1]?.substring(1))) {
                    return (
                        <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                    )
                }
            })    
        )
    }

const{productData}=useContext（ProductContext）；
const[products，setProducts]=useState（[]）；
const[color，setColor]=useState（[]）；
const ParsedColors=props=>{
返回(
props.product.color.map（col=>{
const parsed=JSON.parse（col）
返回(
颜色选择器（[props.product.\u id，parsed.value]）}/>
)
})
)
}
常量颜色选择器=（[productId，颜色]）=>{
setColor（[productId，颜色]）
if（products.some（product=>product.\u id==productId））{
RenderProductImage（products.find（product=>product.\u id==productId））
}
}
const RenderProductImage=（产品）=>{
返回(
product.imageFile？.map（图像=>{
if（image.originalname.includes（颜色[1]？.substring（1）））{
返回(
)
}
})    
)
}

以下是我如何使用它：

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

{color.length>0？
:
{product.imageFile.map（image=>{
if（image.originalname.includes（'def'））{
返回(
)
}
})}
}

因此，条件正在工作，并且包含（'def'）的图像正在渲染，但是当我选择颜色时，我得到了错误

更新：

功能：

const RenderProductImage = props => {
        if(products.some(product => product._id === props.productId)) {
            return(
                products.find(product => product._id === props.productId).imageFile?.map(image => {
                    if(image.originalname.includes(color[1].substring(1))) {
                        return (
                            <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                        )
                    }
                })
            )
        }
    }

const RenderProductImage=props=>{
if（products.some（product=>product.\u id==props.productId））{
返回(
products.find（product=>product.\u id==props.productId）.imageFile？.map（image=>{
if（image.originalname.includes（颜色[1]。子字符串（1）））{
返回(
)
}
})
)
}
}

使用：

{color.length>0？
:
{product.imageFile.map（image=>{
if（image.originalname.includes（'def'））{
返回(
)
}
})}

颜色数据：

---

更改您的

RenderProductImage

功能，如下所示：-

    const RenderProductImage = (props) => {
        return(
            props.product.imageFile?.map(image => {
                if(image.originalname.includes(color[1]?.substring(1))) {
                    return (
                        <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                    )
                }
            })    
        )
    }

<RenderProductImage product={product} />

{(color.length > 0 && color[0] === product._id) ? ... }

更改条件以渲染产品图像，如下所示：-

    const RenderProductImage = (props) => {
        return(
            props.product.imageFile?.map(image => {
                if(image.originalname.includes(color[1]?.substring(1))) {
                    return (
                        <img src={require(`./styles/images/${image.originalname}`).default} alt="product img" />
                    )
                }
            })    
        )
    }

<RenderProductImage product={product} />

{(color.length > 0 && color[0] === product._id) ? ... }

---

您需要在

RenderProductImage

中传递产品道具，然后以与在

ParsedColors

中相同的方式在功能上使用。否，当您在

RenderProductImage

中发送

productId

时，您需要通过

道具访问它。productId

与您在

ParsedColors

中访问产品的方式相同th

props.product

是的，我看到了but@PriyankKachhela现在，当我为一个产品选择一种颜色时，它会改变所有产品的图像，而不仅仅是所选产品的图像，这就是为什么我试图让它像我首先展示的那样，取所选产品的ID，只改变其图像，所以你的意思是传递整个产品对象，而不仅仅是ID？是的，t然后，您可以检查

imageFile

数组并根据条件渲染

img

。好的，这可以正常工作，但是我如何为其他我没有选择颜色的产品创建条件，例如条件包括（“def”）（默认图像），以保持不变。因为现在如果我选择一种颜色，其他产品图像将消失。如果你想，我可以显示屏幕截图。当选择颜色时，你还需要指定productId，以便稍后你可以通过比较productId来检查哪种颜色与产品相关。你可以显示编辑，在哪里执行？