javascriptでリンクをクリックすると関数のカウントを防ぐ方法は？

Question

私はMeteorを使用しており、データベースとしてMongoDBがあります。 "count"変数で項目番号を自分自身でリストしようとしました。 しかし、Navbarのリンクをクリックするたびに、リセットせずに数えます。

例えば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」変数に問題があります：あなたは1、2、3たびにコンポーネントをレンダリングし、あなたは使用しないでください示したいと

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

グローバル変数countRegister。ここで問題となるのは、ウェブサイトを更新しない限り、countRegister変数は決して0にリセットされません。これは、1回だけ初期化されるグローバル変数であるため、カウントは増加し続けます。あなたはNL map方法、の二番目の引数を使用することができ

代わりに、インデックス

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

これは `あなたがそれ