错误：在 MERN 堆栈应用程序

如何解决错误：在 MERN 堆栈应用程序

我试图渲染图片等于所选颜色，但由于某种原因出现以下错误：

未捕获的错误：RenderProductimage(...)：没有返回任何内容使成为。这通常意味着缺少 return 语句。或者什么都不渲染，返回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" />
                    )
                }
            })    
        )
    }

这是我如何使用它：

{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>

所以条件有效并且包含('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" />
                        )
                    }
                })
            )
        }
    }

使用：

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

颜色数据：

解决方法

更改您的 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：-

<RenderProductImage product={product} />

更改您的条件以呈现产品图像，如下所示：-

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