Javascript 将数据从对象数组发送到组件

目标：呈现来自

位置[0]的3个
SearchItem
组件。结果[0]

和来自

位置[0]的3个
SearchItem
组件。结果[1]

我有一个对象数组，这些对象是我想在我的

SearchItem

组件中呈现的数据：

const位置=[
{
结果:[
{名称：“意大利罗马”，价格：100，距离：1299，比赛：96}，
{名称：“中国北京”，价格：200，距离：3000，比赛：93}，
{名称：“美国加利福尼亚州”，价格：250，距离：420，匹配：75}，
],
},
{
结果:[
{名称：“纽约，罗马”，价格：100，距离：1299，匹配：96}，
{名称：“西班牙”，价格：200，距离：3000，比赛：93}，
{名称：“美国加利福尼亚州”，价格：250，距离：420，匹配：75}，
],
},
];

下面是我如何通过道具将数据传递到组件：

{locations[0]。results.map（（位置，索引）=>{
返回；
})}

现在，当我控制台登录到我的

SearchItem

组件时，只有``位置[0]。结果[0]正在打印

这是我的

SearchItem

组件：

函数搜索项（{locations}）{
控制台日志（位置）；
返回(
{location.name}
);
}

知道我做错了什么吗？

试试下面的代码

{locations[0].results.map((location) => <SearchItem location={location} />)}

{locations[0].results.map（（location）=>）}

函数搜索项（{location}）{
控制台日志（位置）；
返回(
{location.name}
);
}

试试这个：

{locations[0].results.map((location, index) => {
            return <SearchItem locations={location}  key={index} />;
})} 

{locations[0]。results.map（（位置，索引）=>{
返回；
})} 

{locations[0].results.map((location, index) => {
            return <SearchItem locations={location}  key={index} />;
})}