Question

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

这会映射我的整个数组，但是如何从最小索引映射到最大索引？所以说我的阵列有500个元素。我想将此数组（数据）从索引15映射到24（包括端点）。（所以我的屏幕上只有10个元素。）

编辑：这些答案很有意思..但是没有提到.filter（）？我看到它可能对我想要的东西有所帮助，但我正在试图弄清楚如何做出反应。

Answer 1

使用Array#slice()从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} />

由于您已更新了问题，因此使用Array#filter()时，filter()要求您对整个集进行迭代。 Array#slice()只会提取您想要提取的连续索引范围。如果您提供了一个条件，希望所有Array数据成员都满足并且您的集合是无序的，那么filter()会更好。

Answer 2

这里的问题是Array.prototype.map必须返回完全相同的数组长度所以你需要再次进行一些过滤和映射。

为了最小化循环次数和迭代次数，我会使用Array.prototype.reduce，这将允许您在同一次迭代中进行过滤和映射。

运行示例：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 3

但是你设置了最小值/最大值（让＆＃39;假设状态）

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

如果索引（i）大于或等于min，并且小于或等于max，则只需将地图调整为if语句即可返回

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

现在，我们可以在这里说实话，并说这是低效的。所以，在你达到最大值后，突破循环，这可能需要一个不同的循环类型，因为我认为你不能从map

中断

如何映射反应中的索引范围？

3 个答案: