javascript - 在reactjs/redux中渲染JSON文件的前几个对象

Question

我正在从包含许多用户对象的 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>
    )
};

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

var row = [];

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

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

我该怎么做？

Answer 1

使用Array#slice()仅获取数组的一部分:

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