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

Question

我创建了一个 ReactJS 应用程序，它会生成虚假的随机数据。在作为随机数生成器的一个部分中，一个组件生成给定长度的随机数字。在这里查看 https://newcodingera.com/fakeformdata/#/numbers它有一个输入字段来增加/减少数字的长度值。当我将其减少到 1 时，它应该产生长度为 1 的任何随机数(0 到 9)，但它会产生两位随机数，

最后一个方法getNumberOfDigits负责使用for循环生成给定长度的随机数，但我认为当我调用此方法时它会执行一次额外的迭代。奇怪的是，当我采用该方法并在任何在线 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() 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) });
});