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

Question

我创建了一个ReactJS应用程序，它可以生成虚假的随机数据。在一个部分中作为随机数生成器，因为一个组件生成给定长度的随机数字。在这里查看 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("");
}

Answer 1

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

这是因为setState()不是同步的，当你这样做时

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) });
});