Error: Nothing was returned from render... in MERN Stack Application

Question

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

Uncaught Error: RenderProductImage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, 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" />
                                                    )
                                                }
                                            })}
                                        </>

颜色数据：

Answer 1

更改您的 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) ? ... }

Error: Nothing was returned from render... in MERN Stack Application

Error: Nothing was returned from render... in MERN Stack Application

mongodb

node.js

express

reactjs

mern