variables - How to prevent function count when link clicking in javascript? -
i use meteor , there mongodb database. try list item number myself "count" variable. every time click on link on navbar, count without resetting.
for example first time result of clicking "contacts" on navbar show below.
--------------------------------- contacts products solutions --------------------------------- item user 1 2 b 3 c when click "contacts" again, shows below.
--------------------------------- contacts products solutions --------------------------------- item user 4 5 b 6 c how can prevent javascript run every time click link?
in code below, have problem "countregister" variable:
import react, { component } 'react'; import proptypes 'prop-types'; import { link } 'react-router-dom'; import { table, alert, button } 'react-bootstrap'; import { meteor } 'meteor/meteor'; import { createcontainer } 'meteor/react-meteor-data'; import { registers } '../../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);
as want show 1, 2, 3 each time render component, shouldn't use global var countregister. problem here long don't refresh website, countregister variable never reset 0, global variable gets initialized once, , count continue increase.
instead, use second argument of map method, nl, index
registers.map(({ _id, regsid, salution, firstname, lastname, province, country, status, username }, index) => ( // <- index second argument, starting 0 <tr key={_id}> <td>{( index + 1)}</td> // <- show 1, 2, 3, increase 1 <td>{salution}</td> // ... this keep count way want it
Comments
Post a Comment