link 点击 javascript 时如何防止函数计数?
How to prevent function count when link clicking in javascript?
我使用 Meteor 并且有 MongoDB 作为数据库。
我尝试通过 "count" 变量自己列出项目编号。
但是每次我点击导航栏上的link,它都没有重新设置。
例如,第一次在导航栏上单击 "Contacts" 的结果如下所示。
---------------------------------
Contacts Products Solutions
---------------------------------
item user
1 a
2 b
3 c
再次点击"Contacts"时,显示如下。
---------------------------------
Contacts Products Solutions
---------------------------------
item user
4 a
5 b
6 c
如何防止每次单击 Link 时 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);
因为您想在每次渲染组件时显示 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>
// ...
这将使您的计数保持您想要的方式
我使用 Meteor 并且有 MongoDB 作为数据库。 我尝试通过 "count" 变量自己列出项目编号。 但是每次我点击导航栏上的link,它都没有重新设置。
例如,第一次在导航栏上单击 "Contacts" 的结果如下所示。
---------------------------------
Contacts Products Solutions
---------------------------------
item user
1 a
2 b
3 c
再次点击"Contacts"时,显示如下。
---------------------------------
Contacts Products Solutions
---------------------------------
item user
4 a
5 b
6 c
如何防止每次单击 Link 时 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);
因为您想在每次渲染组件时显示 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>
// ...
这将使您的计数保持您想要的方式