验证要在 setState 中使用的变量答案

【问题标题】：Validating variable to be used in setState验证要在 setState 中使用的变量
【发布时间】：2021-08-24 08:20:58
【问题描述】：

我有一个拆分日期输入（DD/MM/YYYY 的 3 个不同输入） - 我遇到了一些控制台问题，即“一个组件正在更改一个不受控制的输入以进行控制 - 可能是由于值从未定义更改为已定义。”

基本上我想要做的是确保如果存在dateInputValue 的字符串值（格式为：“28-08-2022”），那么我们将其拆分并预填充字段（这是有效的)。

但是，我想通过添加一个检查来使我的代码更加健壮，如果 dateInputValue 中不存在这样的字符串值并且它只是一个空字符串，则 3 个输入由 3 个空字符串填充（ "")。

任何人都可以提出适当的改变来实现这一点吗？

  const [intialDay, initialMonth, initialYear] = dateInputValue.split("-");
  const [day, setDay] = useState(intialDay);
  const [month, setMonth] = useState(initialMonth);
  const [year, setYear] = useState(initialYear);

【问题讨论】：

您应该首先验证该值是否为有效日期，然后继续解析并使用这些值。见How to validate a date?

标签： javascript reactjs datetime setstate

【解决方案1】：

你可以检查是否未定义，设置空字符串：

const [day, setDay] = useState(intialDay || '');
const [month, setMonth] = useState(initialMonth || '');
const [year, setYear] = useState(initialYear || '');

【讨论】：

这不符合 OP 的标准。您应该首先测试 dateInputValue 是否符合所需的模式，然后相应地设置变量值。