如何防止鏈接在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> 
    // ... 

這將讓您的數，您希望它