foreach内部映射和渲染数据

时间:2018-12-27 08:26:35

标签: reactjs eslint

我只想显示数组中的两个数据。数据是这样的:

0: 名称:“ jan” 网址:“ https://www.pet/event/imain5/

1: 名称:“ willium” 网址:“ https://www.pet/event/imain6/

2: 名称:“ petter” 网址:“ https://www.pet/event/imain7/

现在在我的代码中,它显示了从0到2的所有名称。

<div>
  {!!this.state.news.length && (
      {this.state.news.map(name => (
        <List.Item key={name.text}>
          <a href={name.url} target="_blank">
           {name.text}
            />
          </a>
          </List.Item>
      ))}
   )}
</div>

但是我想显示前两个名字,分别是0和1。但是我不知道如何在这张地图内循环。

1 个答案:

答案 0 :(得分:1)

您可以使用map回调中的index argument并为不需要的元素返回null:

<div>
    {!!this.state.news.length && (
        {
            this.state.news.map((name, index) => index > 1 ? null : (
                <List.Item key={name.text}>
                    <a href={name.url} target="_blank">
                        {name.text}
                        />
                </a>
                </List.Item>
            ))
        }
    )}
</div>