Question

我正在学习反应，如果我在一个对象数组中有10个以上的项目，我想在屏幕上最多渲染10个项目。

到目前为止，这是我最多可以渲染十个项目的内容，但是我已经对其进行了硬编码，当我的数组中的数组中有十个以上项目时，我希望它可以自动执行。

constructor() {
    super();
    this.state = {
      musicians: [
        {
          id: 1,
          name: "artist 1",
          display: true
        },
        {
          id: 2,
          name: "Artist 2",
          display: false
        },
        {
          id: 3,
          name: "Artist 3",
          display: false
       };
    ]
    this.numRows = 0;
  };
  render() {
    const artistToRender = this.state.musicians.filter(artist => artist.display);
    const numRows = artistToRender.length;

return (
  <div>
    <p>Number of rows = {numRows}</p>
    {artistToRender.map((artist) => {
        return <li>{ artist.name }</li>
    })}
  </div>
);

}

Answer 1

您可以先将列表过滤到前10个项目：

    {artistToRender.filter((_,idx) => (idx<10))
                   .map((artist) => {
        return <li>{ artist.name }</li>
    })}

Answer 2

您可以看到Here的完整答案，可以了

<ul>
    {
      artistToRender.map((el,i)=> {
         return (<li key={el.id}>{el.name}</li>)
    }).filter((e,k) => k < 10)
    }
 </ul>

如何在react.js对象中最多渲染十个项目

2 个答案: