时间戳

首页 > 解决方案 > 错误：在 MERN 堆栈应用程序中，没有从渲染返回任何内容...

node.js - 错误：在 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" />
                                                    )
                                                }
                                            })}
                                        </>

颜色数据：

在此处输入图像描述

标签： node.jsreactjsmongodbexpressmern

解决方案

改变你的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) ? ... }

推荐阅读