限制 object.map 中的结果数

Question

我正在导入spaces对象。我只想渲染 3 个Card需要spaces. 想象一下网站上的“特色”部分，仅显示较大列表中的几个项目。

使用下面的代码，我目前正在渲染所有结果而不是 3，我是否使用了正确的方法？如果是这样，顺序是错误的吗？

<div className="row">

          {spaces.map(item => {

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

              return (

                <div className="col-sm-12 col-md-6 col-lg-4" key={item.id}>

                  <Card
                    town={item.town}
                    name={item.name}
                    net={item.net}
                    day={item.day}
                    night={item.night}
                    dog={item.dog}
                    parking={item.parking}
                    image={item.image}
                  />

                </div>
              )
            }

          })}

</div>

Answer 1

spaces.map将迭代中的所有元素spaces并生成一个新数组，为每个现有项目提供一个新值。

map回调中的循环是无用的，因为您return在第一次迭代中，立即终止循环。

如果只想获取前 3 个空格，则可以.slice使用数组：

<div className="row">
          {spaces.slice(0,3).map(item => {
              return (
                <div className="col-sm-12 col-md-6 col-lg-4" key={item.id}>
                  <Card
                    town={item.town}
                    name={item.name}
                    net={item.net}
                    day={item.day}
                    night={item.night}
                    dog={item.dog}
                    parking={item.parking}
                    image={item.image}
                  />
                </div>
              )
          })}
</div>