Javascript 即使同一代码适用于另一个组件，函数组件的一部分也不会在React中呈现

我在一个React网站上工作。我使用一个函数组件通过映射数组来呈现一段代码。这是密码

import React from 'react'
import './DedicatedServer.css'

function DedicatedServer() {
    const features = [
        {
            id: 1,
            title: "Performance",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 2,
            title: "Secure",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 3,
            title: "Speed",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 4,
            title: "Price",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 5,
            title: "Uptime",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
        {
            id: 6,
            title: "Live Support",
            text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
        },
    ]
    return (
        <div className="dedicated-server-container">
            <div>
                <h2 className="dedicated-server-heading">100GBPS for your needs</h2>
                <p className="dedicated-server-text">100GBPS provides you with unrivalled performance, support, and reliability</p>
                <p className="dedicated-server-text">Everything you can think of when you want to buy a dedicated server</p>
                <div className="dedicated-features">
                    {features.map((feature, i) => {
                        <div key={i} className="dedicated-feature">
                            <h3 className="feature-heading">{feature.title}</h3>
                            <p className="feature-text">{feature.text}</p>
                        </div>
                    })}
                    <h1>Hello there!</h1>
                </div>
            </div>
        </div>
    )
}

export default DedicatedServer

从“React”导入React
导入“./dicatedserver.css”
函数专用服务器（）{
常量特征=[
{
id:1，
标题：“表演”，
文本：“随机文本足够长，可以带你去任何地方。我不确定现在写什么，但结果会很好。”
},
{
id:2，
标题：“安全”，
文本：“随机文本足够长，可以带你去任何地方。我不确定现在写什么，但结果会很好。”
},
{
id:3，
标题：“速度”，
文本：“随机文本足够长，可以带你去任何地方。我不确定现在写什么，但结果会很好。”
},
{
id:4，
标题：“价格”，
文本：“随机文本足够长，可以带你去任何地方。我不确定现在写什么，但结果会很好。”
},
{
id:5，
标题：“正常运行时间”，
文本：“随机文本足够长，可以带你去任何地方。我不确定现在写什么，但结果会很好。”
},
{
id:6，
标题：“现场支持”，
文本：“随机文本足够长，可以带你去任何地方。我不确定现在写什么，但结果会很好。”
},
]
返回(
100GBPS满足您的需求
100GBPS为您提供无与伦比的性能、支持和可靠性
购买专用服务器时所能想到的一切
{features.map（（feature，i）=>{
{feature.title}
{feature.text}
})}
你好！
)
}
导出默认专用服务器

其他一切都按预期工作，但大括号内的块不会渲染。我检查了控制台，也没有错误

我查看了一些关于与渲染问题相关的堆栈溢出的答案，但我正在跟踪所有内容，我不确定我遗漏了什么

我在另一个文件中使用相同的方法，效果很好。我知道这是一个非常简单的问题，我在这里遗漏了一些非常愚蠢的东西，但是你能指出这里的问题是什么吗

这是另一个文件的代码，它工作得很好

import React from 'react'
import cloudlinux from './vector-logo/cloudlinux.svg'
import litespeed from './vector-logo/litespeed.svg'
import letsencrypt from './vector-logo/lets-encrypt.svg'
import cloudflare from './vector-logo/cloudflare.svg'
import cpanel from './vector-logo/cpanel.svg'
import './Vendors.css'

function Vendors() {
    const vendorList = [
        {  
            id: 1,
            title: "Cloudflare",
            img: `${cloudflare}`
        },
        {
            id: 2,
            title: "LiteSpeed",
            img: `${litespeed}`
        },
        {
            id: 3,
            title: "Let's Encrypt",
            img: `${letsencrypt}`
        },
        {
            id: 4,
            title: "Cloud Linux",
            img: `${cloudlinux}`
        },
        {
            id: 5,
            title: "cPanel",
            img: `${cpanel}`
        }        
    ]
    return (
        <div className="vendor-div">
                <h2 className="vendor-text">Our Vendors</h2>
            <div key={vendorList.id} className="vendors">
                {vendorList.map((vendors, index) => (
                    <img key={index} className="vendor-image" alt={vendors.title} src={vendors.img}/>    
                ))}
            </div>
        </div>
    )
}

export default Vendors

从“React”导入React
从“./vector logo/cloudlinux.svg”导入cloudlinux
从“./vector logo/litespeed.svg”导入litespeed
从“./vector logo/lets encrypt.svg”导入letsencrypt
从“./vector logo/cloudflare.svg”导入cloudflare
从“./vector logo/cpanel.svg”导入cpanel
导入“./Vendors.css”
功能供应商（）{
常量供应商列表=[
{  
id:1，
标题：“Cloudflare”，
img:`${cloudflare}`
},
{
id:2，
标题：“LiteSpeed”，
img:`${litespeed}`
},
{
id:3，
标题：“让我们加密”，
img:`${letsencrypt}`
},
{
id:4，
标题：“云Linux”，
img:`${cloudlinux}`
},
{
id:5，
标题：“cPanel”，
img:`${cpanel}`
}        
]
返回(
我们的供应商
{vendorList.map（（供应商，索引）=>(
))}
)
}
导出默认供应商

这是我在堆栈溢出上找到的答案，我猜这不是问题所在。

---

您必须像下面这样从地图内部返回创建的div

{features.map((feature, i) => {
                        
    return <div key={i} className="dedicated-feature">
                            
        <h3 className="feature-heading">{feature.title}</h3>
                            
        <p className="feature-text">{feature.text}</p>
                        
    </div>
})}

---

这是

map

函数中的语法问题。或者用

（…）

替换大括号，如第二个示例中所示，或者在JSX输出之前的

{…}

内放置一个

返回值。现在，您的
映射实际上没有返回任何内容。我现在明白问题所在了。非常感谢您的解决方案。非常感谢。
{features.map((feature, i) => (
                        
    <div key={i} className="dedicated-feature">
                            
        <h3 className="feature-heading">{feature.title}</h3>
                            
        <p className="feature-text">{feature.text}</p>
                        
    </div>
))}