Javascript ReactJS组件中for循环的奇怪行为

我创建了一个ReactJS应用程序，它可以生成虚假的随机数据。在一个部分中作为随机数生成器，其中一个组件生成给定长度的随机数字。在这里检查 它有一个输入字段，用于递增/递减数字的长度值。当我把它减到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("");
}

import React，{Component}来自“React”；
从“伪造者”进口伪造者；
从“./Input”导入输入；
从“./layouts/PageHeader”导入页眉；
从“信用卡生成器”导入CreditCardGenerator；
导出默认类号生成器扩展组件{
状态={
数字：10，
numberOfDigits:getNumberOfDigits（），
值：getFakeValues（），
};
刷新数据=（）=>{
这是我的国家({
numberOfDigits:getNumberOfDigits（this.state.digits），
值：getFakeValues（），
});
};
onChangeHandler=e=>{
var指数=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；
返回(
伪造信用卡号码
选择卡片类型
美国运股票交易所
签证
万事达卡
随机数字
输入位数
);
}
}
函数getFakeValues（cardType=“”）{
返回{
卡片：{
编号：getFakeCardNumber（cardType），
cvv:getFakeCVV（），
expiryDate:getFakeExpiryDate（），
},
};
}
函数getFakeCardNumber（类型=“”）{
返回CreditCardGenerator.GenCC（类型）；
}
函数getFakeCVV（）{
var cvv=“”；
对于（变量i=0；i<3；i++）{
cvv+=faker.random.number（{max:9}）.toString（）；
}
返回cvv；
}
函数getFakeExpiryDate（）{
const fakeDate=伪造日期未来（5）；
var d=新日期（伪造日期）；
变量月份=d.getMonth（）+1；
var day=d.getDate（）；
无功输出=
（第10天？“0”：“”）+
一天+
"-" +
（月份<10？“0”：“”）+
月+
"-" +
d、 getFullYear（）；
返回输出；
}
函数getNumberOfDigits（长度=10）{
常数数组=[1,2,3,4,5,6,7,8,9,0]；
设constructedArray=[]；
for（设i=0；i

如果仔细观察，一旦将数字减为零，实际上会得到一个1位数的随机数–当再次开始增加时，同样的模式会重复：它总是落后一个设置

这是因为，当你这么做的时候

this.setState({ [e.target.name]: e.target.value });
this.setState({ numberOfDigits: getNumberOfDigits(this.state.digits) });

此.state.digits

尚未使用用户输入更新

您可以向this.setState添加回调，该回调保证在状态实际更新后调用，如下所示：

this.setState({ [e.target.name]: e.target.value }, () => {
  this.setState({ numberOfDigits: getNumberOfDigits(this.state.digits) });
});