如何从 React 中的对象数组中仅返回 3 个元素答案

【问题标题】：How to return only 3 elements from arrays of object in React如何从 React 中的对象数组中仅返回 3 个元素
【发布时间】：2019-12-05 18:04:08
【问题描述】：

所以，我基本上使用Github User API，通过Axios获取30个用户，并显示为列表，但我希望它只显示其中3个，怎么做？我应该尝试在地图功能或获取部分进行欺骗吗？

尝试在地图或过滤功能上做一些技巧，但以失败告终。

 state = {
    users: [],
    loading: false,
    alert: null
  };



searchUser = async text => {
this.setState({ loading: true });

const res = await axios.get(
  `https://api.github.com/search/users?q=${text}&client_id=${
    process.env.REACT_APP_GITHUB_CLIENT_ID
  }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
);

this.setState({ users: res.data.items, loading: false });
  };

{users.map(
<UserItem key={user.id} user={user} />
        ))}

【问题讨论】：

Github 提供了一个查询参数来限制每页。 per_page=3。 api.github.com/search/users?q=facebook&per_page=3。 Array.slice 也可以如下所述工作。

标签： arrays reactjs dictionary object

【解决方案1】：

使用Array.slice 将限制数组只包含第一个x 元素。如果数组中的元素少于x，它将简单地将数组保持原样：

{
  users.slice(0, 3).map(
    <UserItem key={user.id} user={user} />
  ))
}

您可能遇到的另一个问题是未使用该州的 user 数据：

{
  this.state.users.slice(0, 3).map(
    <UserItem key={user.id} user={user} />
  ))
}

你可以阅读更多关于React state here的信息。

编辑：正如@ChristopherNgo 所指出的，Array.slice 不包含在内，因此对于 3 个元素，它应该是 0 到 3。

【讨论】：

您需要users.slice(0, 3)，因为对于切片，第二个参数不包含在内。
@ChristopherNgo 谢谢你是对的，我错过了。更新帖子以更正此问题。

【解决方案2】：

在将状态对象中的值存储在users属性中后，获取为res：


...

const res = await axios.get(
  `https://api.github.com/search/users?q=${text}&client_id=${
    process.env.REACT_APP_GITHUB_CLIENT_ID
  }&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`
);

this.setState({ users: res.data.items, loading: false });
  };

下面的代码必须给你想要的3 elements from array of objects的结果


let SIZE = 3;
let users = this.state.users.slice(0, SIZE).map(item => {
    return <UserItem item={item} key={item.id} />
}

...

return (
  <div>
    {users}
  </div>   
)

【讨论】：

【解决方案3】：

//对于功能组件

const [users, setUsers] = usestate([ ]);

return (
 
    users.slice(0, 3).map( item => {
        ...add logic
    })
)

【讨论】：