Question

这可能很容易，但是我似乎无法弄清楚。如何在列表中按顺序打印数字？如果我打印索引，某些数字会由于我的情况而被跳过？我可以在条件内的地图函数内的某处设置一个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>
  );
};

Answer 1

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

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

对问题发表评论:)

Answer 2

您必须在每次迭代中增加count变量。您可以尝试以下方法。它应该可以解决您的问题。

<li className={page == index ? 'active' : ''} key={index}>{count++}</li>

最后的

++很重要。 count++将首先读取当前count变量的值，然后递增其值。

Answer 3

尝试使用foreach，因为如果您尝试使用map，您的结果将像带有一些未定义值的数组：[<li></li>, undefined, <li></li>]，而foreach会阻止它。

const renderList = ({fullList}) => {
  let counter = 0;
  const renderList = [];
  list.foreach((data, index) => {
    if (data && data.includePage) renderList.push(<li>{++counter}</li>);
  });
  return renderList;
}

在带有map的react组件内打印数字？

3 个答案: