React JS - onChange 函数被触发两次

Question

我在 React 中处理日期输入时遇到问题。所以日期值来自graphQL，日期格式是dd.mm.yyyy但为了设置HTML日期输入的默认值，我将格式转换为yyyy.mm.dd并再次保存数据，反之亦然。

我正在保存状态中的日期并调用更改函数来更新值和转换格式。

问题是这个函数被触发两次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

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

1. 第一次调用：在输入上： onChange() 调用 ConvertDate() 方法并设置状态。关于设置状态组件重新渲染
2. 第二次调用：组件重新渲染并在获取 defaultValue 时调用 ConvertDate() 方法

我建议将 defaultValue 存储在 state 中并从 state 中检索该值，而不是在 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

更新：
MomentJS 不再是用于操作日期的推荐库，因为它已经过时并且有更好更小的替代方案可用。