javascript - 在带有map的react组件内打印数字？(Print numbers inside react component with map?)

Question

This is probably an easy one, but I can't seem to figure it out.

(这可能很容易，但是我似乎无法弄清楚。)

How do I print the numbers in order inside my list?

(如何在列表中按顺序打印数字？)

If I print index some of the numbers will be skipped due to my conditions?

(如果我打印索引，某些数字会由于我的情况而被跳过？)

Can I set a count++ somewhere inside my map-function inside my condition so it will increase every time a list-item is printed?

(我可以在条件内的地图函数内的某处设置一个count ++，以便每次打印列表项时都会增加它吗？)

export const MFAPaging = ({rootStore, page}) => {
  let count = 1;

  return (
    <div className="components-paging-brder">
      <div className="components-paging">
        <ul>
          {rootStore.mfaStore.links.map((item, index) =>
              item && item.includePage ? 
              <li className={page == index ? 'active' : ''} key={index}>{count}</li>
              : undefined 
            )}
        </ul>
        <MFAButtons rootStore={rootStore} page={page} />
    </div>
  </div>
  );
};

  ask by Nirakander translate from so

Answer 1

First you can filter the array, and then your indexes will be cool in your .map (never use .map to filter, you already have build-in functions)

(首先您可以过滤数组，然后您的索引在.map中会很酷（切勿使用.map进行过滤，因为您已经具有内置功能）)

{rootStore.mfaStore.links.filter((item)=> item && item.includePage).map((item, index) =>
    <li className={page == index ? 'active' : ''} key={index}>{count}</li>
)}

For questions comment :)

(如有疑问，请评论:))