Javascript 在reactjs/redux中呈现JSON文件的前几个对象

我从一个包含许多用户对象的json文件中获取数据。我成功地从这个json文件中检索数据并在我的react应用程序中呈现。我需要只渲染前4个对象，如何才能做到这一点

我使用了for循环，但结果是渲染所有对象4次，而不是前4个对象

我的密码

export const FriendSuggestionsHomeList = ({suggestedList}) => {

    const noFriendsSuggested = (
        <div>
            <p>
                Sorry you have no friends in your contacts list
            </p>
        </div>
    );

    const showFriendsAvailable = (
        <div>
            {suggestedList.map(user => <FriendSuggestionsHomeCard suggestedList={user}/> )}
        </div>
    );

    return (

        <div>
            {suggestedList.length === 0 ? noFriendsSuggested : showFriendsAvailable}
        </div>
    )
};

export-const-friendSuggestionHomeList=（{suggestedList}）=>{
常数noFriendsSuggested=(

抱歉，您的联系人列表中没有朋友

);
常量showFriendsAvailable=(
{suggestedList.map（用户=>）}
);
返回(
{suggestedList.length==0？noFriendsSuggested:showFriendsAvailable}
)
};

我做过类似的事情，但结果是打印了4次所有对象

var row = [];

for (var i = 0; i < 4; i++) {

        row.push(suggestedList.map(user => <FriendSuggestionsHomeCard suggestedList={user}/>));
}

var行=[]；
对于（变量i=0；i<4；i++）{
row.push（suggestedList.map（user=>）；
}

如何执行此操作？

用于仅获取阵列的一部分：

const showFriendsAvailable = (
    <div>
        {suggestedList
            .slice(0, 4) // limits the array to its first 4 members
            .map(user => <FriendSuggestionsHomeCard suggestedList={user}/> )}
    </div>
);

const showFriendsAvailable=(
{建议列表
.slice（0，4）//将数组限制为其前4个成员
.map（用户=>）}
);

用于仅获取阵列的一部分：

const showFriendsAvailable = (
    <div>
        {suggestedList
            .slice(0, 4) // limits the array to its first 4 members
            .map(user => <FriendSuggestionsHomeCard suggestedList={user}/> )}
    </div>
);

const showFriendsAvailable=(
{建议列表
.slice（0，4）//将数组限制为其前4个成员
.map（用户=>）}
);

它打印所有对象4次为什么

因为您在

for

循环中运行

map

，所以它将类似于4*所有对象的映射

您需要删除

map

部分，请这样编写：

for (var i = 0; i < 4 && i < suggestedList.length; i++) {
    row.push(<FriendSuggestionsHomeCard key={i} suggestedList={suggestedList[i]}/>);
}

for（变量i=0；i<4&&i

或使用：

{
suggestedList.slice（0,4）.map（（用户，i）=>
)
}

注意：为每个元素指定唯一键

它打印所有对象4次为什么

因为您在

for

循环中运行

map

，所以它将类似于4*所有对象的映射

您需要删除

map

部分，如下所示：

for (var i = 0; i < 4 && i < suggestedList.length; i++) {
    row.push(<FriendSuggestionsHomeCard key={i} suggestedList={suggestedList[i]}/>);
}

for（变量i=0；i<4&&i

或使用：

{
suggestedList.slice（0,4）.map（（用户，i）=>
)
}

注意：为每个元素指定唯一键