Question

我正在使用React.js作为前端框架构建项目。在一个特定的页面上，我向用户显示完整的数据集。我有一个包含这个完整数据集的数组。它是一个JSON对象数组。在向用户呈现这些数据方面，我目前通过使用Array.map（）返回每个数据项来显示整个数据集。

这是朝着正确方向迈出的一步，但现在我只需要显示数据集的一部分，而不是整个事物，我还需要一些控制来了解总数据集中有多少显示，以及尚未显示多少数据集。基本上我正在构建类似“查看更多”按钮的东西，可以向用户加载更多数据项。

以下是我现在使用的'feed'代表我的JSON对象数组。（显示整个数据集。）

 return (
  <div className={feedClass}>
  {
    feed.map((item, index) => {
      return <FeedItem key={index} data={item}/>
    })
  }
  </div>
);

我想知道是否可以在数组的一部分上使用.map（）而不必在手之前分解数组？我知道一个可能的解决方案是保存完整的数据集，然后将其分成几部分，然后.map（）这些部分，但是有没有办法将.map（）一部分数组而不必破坏它了？

感谢所有反馈。谢谢！

Answer 1

请勿尝试在映射步骤中使用黑客来解决此问题。

而是映射前的slice() the list to the right length first：

class Feed extends React.Component {
  constructor(props) {
    super(props)
    
    this.handleShowMore = this.handleShowMore.bind(this)
    
    this.state = {
      items: ['Item A', 'Item B', 'Item C', 'Item D'],
      showItems: 2
    }
  }
  
  handleShowMore() {
    this.setState({
      showItems: 
        this.state.showItems >= this.state.items.length ?
          this.state.showItems : this.state.showItems + 1
    })
  }
  
  render() {
    const items = this.state.items.slice(0, this.state.showItems).map(
      (item) => <div>{item}</div>
    )
    
    return (
      <div>
        {items}
        <button onClick={this.handleShowMore}>
          Show more!
        </button>
      </div>
    )
  }
}
  
ReactDOM.render(
  <Feed />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'></div>

Answer 2

我脑子里最简单的方法就是使用过滤器和地图

const feed = [1,2,3,4,5,6,7,8,9,10,11]
feed.filter((item, index) => index < 5).map((filteredItem) => //do somthing with filtred item here//)

其中 5 只是您想要获得的项目数量

Answer 3

如果您只想映射数组的一部分，则应首先过滤（）数组以根据条件获取预期部分：

array.filter(item => <condition>).map();

Answer 4

你可以使用slice函数来映射数组，看起来你想在那里做一些分页。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Answer 5

Array.reduce应该做你想要的。只需根据您想要的范围更改if语句。

var excludeAfterIndex = 5;

feed.reduce((mappedArray, item, index) => {
  if (index > excludeAfterIndex) { // Whatever range condition you want
    mappedArray.push(<FeedItem key={index} data={item}/>);
  }

  return mappedArray;
}, []);

Answer 6

是的，您可以根据索引映射数组的一部分。例如：

yourArray = yourArray.map(function (element, index, array) {
        if (array.indexOf(element) < yourIndex) {
            return {
               //logic here
            };
        } else {
            return {
                //logic here
            };
        }

    });

Answer 7

Array#map遍历所有项目。

map() 方法创建一个新数组，其结果是在此数组中的每个元素上调用提供的函数。

您可以使用Array#filter

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

获取所需的项目，然后应用所需格式的地图。

Answer 8

没有map（）函数的版本只映射部分数组。

您可以将.map（）与.filter（）结合使用。

你得到当前元素的索引作为map的第二个arg，如果你有一个当前页面和页面大小的变量，你可以很容易地从你的数组中过滤出正确的页面，而不必真正将它切片。

var currentPage = 1;
var pageSize = 25;

dataArray.filter(function(elt, index) {

    var upperThreshold = currentPage * pageSize;
    var lowerThreshold = currentPage * pageSize - pageSize;

    return index < upperThreshold && index > lowerThreshold;

});

Answer 9

使用slice()优于向地图或reduce函数添加条件，但仍会创建该数组分段的其他未使用副本。根据您正在执行的操作，可能不希望这样做。相反，只需使用自定义地图函数即可：

function sliceMap(fn, from, toExclusive, array) {
  const len = toExclusive - from;
  const mapped = Array(len);

  for (let i = 0; i < len; i++) {
    mapped[i] = fn(array[i + from], i);
  }

  return mapped;
};

请注意，fn会接收数组值和（现在）从零开始的索引。您可能要传递原始索引（i + from）。您可能还希望将完整的array作为第三个参数传递，这就是Array.map的作用。

Answer 10

使用这种简单的方法

const [limit, setLimit] = useState(false);
const data = [{name: "john}, {name: 'Anna'}]

这里有两种情况：

仅显示第一个数据，即约翰
显示全部

data.slice(0, extended ? data.length : 1).map((item, index) => <Text>{item.name}</Text>)

....

是否可以仅映射数组的一部分？（Array.map（））

10 个答案:

是否可以仅映射数组的一部分？ （Array.map（））

10 个答案:

是否可以仅映射数组的一部分？（Array.map（））