React JS-onChange函数被触发两次

Question

在使用日期输入进行响应时遇到问题。因此日期值来自 graphQL ，日期格式为dd.mm.yyyy，但是为了为HTML日期输入设置默认值，我将格式转换为yyyy.mm.dd并保存再次输入数据，反之亦然。

我将状态保存为日期，并调用change函数来更新值和转换格式。

问题在于此函数被两次触发onChange并返回NaN-NaN-NaN（在第二次运行中），但并非每次都触发一次（怪异）。并且，对于某些日期，它可以正常工作，例如，02.03.2000没有错误，只执行一次。

使用 24 调用了 两次 ，并且在第二次调用时出错（请参见屏幕截图）。也许转换是错误的吗？如果我从输入中删除defaultValue，那么它只会调用一次。

state = {
    newUser: {
      geburtsdatum: "01.02.2000"
    }
}

ConvertDate(htmlDate, format) {
    var date = new Date(htmlDate);
    var dd = date.getDate();
    var mm = date.getMonth() + 1;
    var yyyy = date.getFullYear();
    if (dd < 10) {
      dd = "0" + dd;
    }
    if (mm < 10) {
      mm = "0" + mm;
    }
    if (format === "graphql") date = dd + "." + mm + "." + yyyy;
    if (format === "html") date = yyyy + "-" + dd + "-" + mm;
    return date;
}

onChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    if (e.target.type === "date") {
      value = this.convertDate(value, "graphql");
    console.log(value, name);
    }
    this.setState(prevState => {
      return {
        newUser: {
          ...prevState.newUser,
          [name]: value
        }
      };
    });
  };

<input
    type="date"
    name="geburtsdatum"
    defaultValue={this.convertDate(this.state.newUser.geburtsdatum, "html")}
    onChange={this.onChange}
    placeholder={this.getDJHTooltip("geburtsdatum")}
/>

Answer 1

该函数被调用两次，因为您在render方法中调用了两次。

1. 第一次调用：输入时：onChange（）调用ConvertDate（）方法并设置状态。在设置状态组件时重新渲染
2. 第二次调用：重新获得组件，并在获取defaultValue时调用ConvertDate（）方法

我建议将defaultValue存储在状态中，然后从状态中检索该值，而不是在render方法中调用函数。

您收到NaN-NaN-NaN，因为正在将无效的日期传递给函数“ ConvertDate”。原因可能是您从API收到的日期在某种程度上不正确。尝试使用momentjs进行日期处理和转换，它相对简单，可以避免错误

编辑： Javascript Date（）构造函数接受“ yyyy-mm-dd”或“ mm-dd-yyyy”这两种格式。

console.log(new Date("2019-12-14")); // valid yyyy-mm-dd
console.log(new Date("2019-14-12")); // invalid yyyy-dd-mm

console.log(new Date("12-14-2019")); // valid mm-dd-yyyy
console.log(new Date("14-12-2019")); // invalid dd-mm-yyyy