我创建了一个ReactJS App,该App生成伪随机数据。在随机数生成器的一节中,一个组件生成给定长度的数字的随机数。在这里https://newcodingera.com/fakeformdata/#/numbers检查 它具有一个输入字段,用于增加/减少数字的长度值。当我将其减小到1时,它将产生长度为1的任何随机数(0到9),但是会产生两位数的随机数,
最后一个方法getNumberOfDigits
负责使用for loop
产生给定长度的随机数,但是我认为当我调用此方法时它会执行一次额外的迭代。奇怪的是,当我采用该方法并在任何在线JavaScript编辑器上运行它时,它会为我提供正确的输出。因此,我很困惑这个问题是由JS还是ReactJS引起的。
import React, { Component } from "react";
import faker from "faker";
import Input from "../Input";
import PageHeader from "../layouts/PageHeader";
import CreditCardGenerator from "creditcard-generator";
export default class NumbersGenerator extends Component {
state = {
digits: 10,
numberOfDigits: getNumberOfDigits(),
values: getFakeValues(),
};
refreshData = () => {
this.setState({
numberOfDigits: getNumberOfDigits(this.state.digits),
values: getFakeValues(),
});
};
onChangeHandler = e => {
var index = e.nativeEvent.target.selectedIndex;
const type = e.nativeEvent.target[index].text;
this.setState({ values: getFakeValues(type) });
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
this.setState({ numberOfDigits: getNumberOfDigits(this.state.digits) });
};
render() {
const { number, cvv, expiryDate } = this.state.values.card;
const { digits, numberOfDigits } = this.state;
return (
<React.Fragment>
<PageHeader
title="Generate Fake & Random Numbers"
subtitle="Generate fake whole number, integer number, etc..."
onRefreash={this.refreshData}
/>
<div className="card mt-3 box-shadow">
<div className="card-body">
<h5 className="card-title">Fake Credit Cards Numbers</h5>
<div className="row">
<div className="col">
<Input
name="credit-card"
value={number}
placeholder="Creadit Card"
label="Creadit Card Number"
/>
<Input
name="cvv"
value={cvv}
placeholder="Creadit Card"
label="Fake CVV Number"
/>
</div>
<div className="col">
<div className="form-group">
<label htmlFor="exampleFormControlSelect1">Select Card Type</label>
<select
onChange={this.onChangeHandler}
className="form-control"
name="imgtype"
>
<option value="Amex">Amex</option>
<option value="VISA">VISA</option>
<option value="Mastercard">Mastercard</option>
</select>
</div>
<Input
name="expiry-date"
value={expiryDate}
placeholder="Expiration Date"
label="Fake Expiration Date"
/>
</div>
</div>
</div>
</div>
<div className="card mt-3 box-shadow">
<div className="card-body">
<h5 className="card-title">Random Numbers Of Digits</h5>
<div className="row">
<div className="col">
<Input
name="credit-card"
value={numberOfDigits}
placeholder="Number Of Digits"
label="Numbers"
/>
</div>
<div className="col">
<label className="mr-2">Enter Number Of Digits</label>
<div className="input-group add-on">
<input
type="number"
min="1"
value={digits}
onChange={this.onChange}
className="form-control"
placeholder="Enter Number Of Digits"
name="digits"
id=""
/>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
}
function getFakeValues(cardType = "") {
return {
card: {
number: getFakeCardNumber(cardType),
cvv: getFakeCVV(),
expiryDate: getFakeExpiryDate(),
},
};
}
function getFakeCardNumber(type = "") {
return CreditCardGenerator.GenCC(type);
}
function getFakeCVV() {
var cvv = "";
for (var i = 0; i < 3; i++) {
cvv += faker.random.number({ max: 9 }).toString();
}
return cvv;
}
function getFakeExpiryDate() {
const fakeDate = faker.date.future(5);
var d = new Date(fakeDate);
var month = d.getMonth() + 1;
var day = d.getDate();
var output =
(day < 10 ? "0" : "") +
day +
"-" +
(month < 10 ? "0" : "") +
month +
"-" +
d.getFullYear();
return output;
}
function getNumberOfDigits(length = 10) {
const numbersArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let constructedArray = [];
for (let i = 0; i < length; i++) {
constructedArray.push(numbersArray[Math.floor(Math.random() * numbersArray.length)]);
}
return constructedArray.join("");
}
答案 0 :(得分:1)
如果仔细观察,将数字减至零实际上会得到一个1位数的随机数-当再次开始增加位数时,会重复相同的模式:它总是落后一个设置。
这是因为setState()
is not synchronous,而且在您这样做时
this.setState({ [e.target.name]: e.target.value });
this.setState({ numberOfDigits: getNumberOfDigits(this.state.digits) });
this.state.digits
尚未用用户输入进行更新。
您可以向this.setState
添加一个回调,确保在实际更新状态后可以调用 ,例如:
this.setState({ [e.target.name]: e.target.value }, () => {
this.setState({ numberOfDigits: getNumberOfDigits(this.state.digits) });
});