Javascript 在不使用返回的情况下，在react组件中出现渲染数组问题

我有一个反应函数，它在显示后返回数组中每个项目的列表。在maps函数中，我想检查并查看是否满足某些参数，并根据if语句呈现不同的div。当我添加一个环绕数组中每个项的

return（）

时，if语句会出错。如果我不添加

return（）

它将不会呈现任何图像。我希望以一种不显示if语句错误的方式呈现数组中的每个项。下面是我的代码：

export default function Details(props){
    return(
        <div>
            <p>Homiez</p>
            {
                props.details.map((detail) => {
                    if(detail.owes === 'Omar'){
                        <div>
                            <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
                        </div>
                    }
                    else if(detail.owed === 'Omar'){
                        <div>
                            <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
                        </div>
                    }
                    else {
                        <div>
                            <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
                        </div>
                    }
                })
            }
        </div>
    )
} 

导出默认功能详细信息（道具）{
返回(
霍米兹

{
道具.细节.地图（（细节）=>{
如果（detail.owes=='Omar'）{
您欠{detail.owed}${detail.amount}的{detail.description}
}
否则如果（detail.owed==='Omar'）{
{detail.owes}欠您{detail.description}的${detail.amount}
}
否则{
{detail.owes}欠{detail.owes}%{detail.amount}的{detail.description}
}
})
}
)
} 

问题在于您没有从map函数内部返回

export default function Details(props){
return(
    <div>
        <p>Homiez</p>
        {
            props.details.map((detail) => {
                if(detail.owes === 'Omar'){
                    return (<div>
                        <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
                    </div>);
                }
                else if(detail.owed === 'Omar'){
                    return (<div>
                        <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
                    </div>);
                }
                else {
                    return (<div>
                        <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
                    </div>);
                }
            })
        }
    </div>
)
} 

导出默认功能详细信息（道具）{
返回(
霍米兹

{
道具.细节.地图（（细节）=>{
如果（detail.owes=='Omar'）{
返回(
您欠{detail.owed}${detail.amount}的{detail.description}
);
}
否则如果（detail.owed==='Omar'）{
返回(
{detail.owes}欠您{detail.description}的${detail.amount}
);
}
否则{
返回(
{detail.owes}欠{detail.owes}%{detail.amount}的{detail.description}
);
}
})
}
)
} 

最好将呈现组件呈现问题从父级推送到子级，您甚至可以尝试以下代码

function singleDeatilElement(details) {
    if(detail.owes === 'Omar'){
        return (<div>
                <span>You owe {detail.owed} ${detail.amount} for {detail.description}</span>
            </div>);
        }
    else if(detail.owed === 'Omar'){
        return (<div>
            <span>{detail.owes} owes You ${detail.amount} for {detail.description}</span>
        </div>);
    }
    else {
        return (<div>
            <span>{detail.owes} owes {detail.owed} %{detail.amount} for {detail.description}</span>
        </div>);
    }
}

export default function Details(props){
let details = props.details.map((detail) => singleDeatilElement(details));

return(
    <div>
        <p>Homiez</p>
        {details}
    </div>
)
} 

函数singledeatileElement（详细信息）{
如果（detail.owes=='Omar'）{
返回(
您欠{detail.owed}${detail.amount}的{detail.description}
);
}
否则如果（detail.owed==='Omar'）{
返回(
{detail.owes}欠您{detail.description}的${detail.amount}
);
}
否则{
返回(
{detail.owes}欠{detail.owes}%{detail.amount}的{detail.description}
);
}
}
导出默认功能详细信息（道具）{
让details=props.details.map（（detail）=>singledeatileelement（details））；
返回(
霍米兹

{详细信息}
)
}