最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to map an index range in react? - Stack Overflow

programmeradmin1浏览0评论
<table>
   <tbody>
   {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
   </tbody>
</table>

This maps my entire array, but how would I map from a minimum index to a maximum index? So say my array has 500 elements. I want to map this array (of data) from index 15 to 24 inclusive. (So I'd only have 10 elements on my screen).

edit: these answers are interesting.. but no mention of .filter() though? I saw that it might help what I want but I'm trying to figure out how to do it in react.

<table>
   <tbody>
   {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
   </tbody>
</table>

This maps my entire array, but how would I map from a minimum index to a maximum index? So say my array has 500 elements. I want to map this array (of data) from index 15 to 24 inclusive. (So I'd only have 10 elements on my screen).

edit: these answers are interesting.. but no mention of .filter() though? I saw that it might help what I want but I'm trying to figure out how to do it in react.

Share Improve this question edited Feb 6, 2018 at 21:20 Shai UI asked Feb 6, 2018 at 21:14 Shai UIShai UI 51.9k77 gold badges217 silver badges316 bronze badges 0
Add a comment  | 

3 Answers 3

Reset to default 8

Use Array#slice() to extract a shallow copy of the values you want from this.state.data.

const SubsetTable = props => {
  let {startIndex, endIndex, data} = props

  let subset = data.slice(startIndex, endIndex)

  return (
   <table>
     <tbody>
       {subset.map((person, i) => (<TableRow key = {i} data = {person} />)}
     </tbody>
   </table>
  )
}

// Since splice() is inclusive of the range given, you'll need to 
// adjust your range to include that last index if needed
// The below will grab all values in indexes 15-24, 
<SubsetTable startIndex={15} endIndex={25} data={this.state.data} />

Since you've updated your question, regarding use of Array#filter(), filter() requires that you iterate over the entire set. Array#slice() is only going to extract the contiguous index range that you'd like extract. filter() is better when you gave a condition that you want all your Array data members to meet and and your collection is unordered.

However you set the min/max (let's assume state)

this.state = {
    min: 15,
    max: 24,
};

You just adjust your map to an if statement to return if the index (i) is greater than or equal to the min, and less than or equal to the max.

{this.state.data.map((person, i) => {
    if (i >= this.state.min && i <= this.state.max) {
        return (<TableRow key = {i} data = {person} />);
    }
})}

Now, we can be real here and say this is inefficient. So, after you have reached the max, break out of the loop, which may require a different loop type since I think you can't break from a map

The problem here is that Array.prototype.map must return the exact same length of the array.
So you need to do some filtering and mapping again.

To minimize the number of loops and iterations, i would use Array.prototype.reduce, which will let you do both filtering and mapping in the same iteration.

Running example:

const persons = [
  { value: 'John', id: 1 },
  { value: 'Jane', id: 2 },
  { value: 'Mike', id: 3 },
  { value: 'Nikol', id: 4 },
  { value: 'Bob', id: 5 },
  { value: 'Dave', id: 6 },
]

const TableRow = ({ data }) => <tr><td>{data.value}</td></tr>

const start = 2;
const end = 4;

const App = () => (
  <div >
    <table>
      <tbody>
        {
          persons.reduce((result, current, i) => {
            if (i >= start && i <= end) { // 0 based don't forget!
              const row = (<TableRow key={i} data={current} />);
              result.push(row);
            }
            return result;
          }, [])
        }
      </tbody>
    </table>
  </div>
);

ReactDOM.render(<App />, 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>

发布评论

评论列表(0)

  1. 暂无评论