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

Posted 2023-02-22

【中文标题】如何从 React 中的对象数组中仅返回 3 个元素

【英文标题】：How to return only 3 elements from arrays of object in React

【发布时间】：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 也可以如下所述工作。

【参考方案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
    )
)