如何防止链接在javascript中单击时的函数计数？

Question

我使用流星，并有MongoDB作为数据库。 我尝试用“count”变量自己列出项目编号。 但每次点击导航栏上的链接时，它都会重新计数。

例如第一次在Navbar上点击“联系人”的结果如下所示。

--------------------------------- 
Contacts Products Solutions 
--------------------------------- 
item user 
1  a 
2  b 
3  c 

当我再次单击“联系人”时，它显示如下。

--------------------------------- 
Contacts Products Solutions 
--------------------------------- 
item user 
4  a 
5  b 
6  c 

如何防止每次点击链接时运行javascript？

在下面我的代码，我有“countRegister”变量问题：

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { Link } from 'react-router-dom'; 
import { Table, Alert, Button } from 'react-bootstrap'; 
import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { Registers } from '../../api/registers'; 


let countRegister = 0 


const DSRegisters = ({ registers, match, history }) => (
      <div className="Registers"> 
       <div className="page-header clearfix"> 
        <h4 className="pull-left">Registration</h4> 
        <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add User</Link> 
       </div> 
       {registers.length ? <Table striped responsive> 
       <thead> 
        <tr> 
         <th>Item</th> 
         <th>Salution</th> 
         <th>Firt Name</th> 
         <th>Last Name</th> 
         <th>Province</th> 
         <th>Country</th> 
         <th>Status</th> 
         <th>Username</th> 
         <th /> 
         <th /> 
        </tr> 
       </thead> 
       <tbody> 
        {registers.map(({ _id, regsId, salution, firstname, lastname, province, country, status, username }) => (
        <tr key={_id}> 
         <td>{countRegister += 1}</td> 
         <td>{salution}</td> 
         <td>{firstname}</td> 
         <td>{lastname}</td> 
         <td>{province}</td> 
         <td>{country}</td> 
         <td>{status}</td> 
         <td>{username}</td> 
         <td> 
          <Button 
           bsStyle="primary" 
           onClick={() => history.push(`${match.url}/${_id}`)} 
           block 
          >View</Button> 
         </td> 
         <td> 
          <Button 
           bsStyle="danger" 
           onClick={() => handleRemove(_id)} 
           block 
           >Delete</Button> 
         </td> 
        </tr> 
        ))} 
       </tbody> 
       </Table> : <Alert bsStyle="warning">Nobody yet!</Alert>} 
      </div> 
); 

DSRegisters.propTypes = { 
    registers: PropTypes.arrayOf(PropTypes.object).isRequired, 
    match: PropTypes.object.isRequired, 
    history: PropTypes.object.isRequired, 
}; 

export default createContainer(() => { 
    const subscription = Meteor.subscribe('registers'); 
    return { 
    registers: Registers.find({}, { sort: { regsId: 1 } }).fetch(), 
    }; 
}, DSRegisters); 

Answer 1

当你想显示1，2，3每次渲染的成分，你不应该使用全球变种countRegister。这里的问题是，只要你不刷新网站，你的countRegister变量将永远不会重置为0，因为它是一个全局变量，只能初始化一次，因此计数将继续增加。

相反，你可以使用map方法，NL的第二个参数，该指数

registers.map(({ 
    _id, 
    regsId, 
    salution, 
    firstname, 
    lastname, 
    province, 
    country, 
    status, 
    username 
}, index) => (// <- index is the second argument, starting from 0 
    <tr key={_id}> 
    <td>{(index + 1)}</td> // <- so to show 1, 2, 3, increase it by 1 
    <td>{salution}</td> 
    // ... 

这将让您的数，您希望它