初始值中使用的数组仅在完全定义时有效

Question

我基本上想做以下事情：

const intialDefaultValues = {
  weekdays: {
    monday: [
      { startTime: "", endTime: "" },
      { startTime: "", endTime: "" },
      { startTime: "", endTime: "" }
    ],
    tuesday: [
      { startTime: "", endTime: "" },
      { startTime: "", endTime: "" },
      { startTime: "", endTime: "" }
    ],
    wednesday: [
      { startTime: "", endTime: "" },
      { startTime: "", endTime: "" },
      { startTime: "", endTime: "" }
    ],
// ...

如您所见，它变得非常重复，我想重新使用部分代码：

const daySchema = [
  { startTime: "", endTime: "" },
  { startTime: "", endTime: "" },
  { startTime: "", endTime: "" }
];

const intialDefaultValues = {
  weekdays: {
    monday: daySchema,
    tuesday: daySchema,
    wednesday: daySchema,
// etc.

但这行不通...

尝试次数

一个 source 我发现在 Javascript 中提到 通过引用 传递对象和数组。所以这让我尝试了几种方法来克隆它。仍然没有运气。

我已经尝试了好的 ol' myArray.slice() 方法，作为 ES6 方式：[...myArray]:

const intialDefaultValues = {
  weekdays: {
    monday: [...daySchema],
    tuesday: [...daySchema],
    wednesday: [...daySchema], 
  // etc.

可重现的例子

我创建了一个 CodeSandbox 来显示我面临的问题：https://codesandbox.io/s/interesting-wave-e7gty

详细版本

要查看此错误，请执行以下操作：

在第一个表单中，单击“星期三”一词。它应该弹出。
然后点击提交

结果： 名称和第一个 "From" 和 "To" 字段应为红色。这有效！

精简版

现在是一个紧凑的例子：

在第二种形式中，单击“星期三”一词。它应该弹出。
然后点击提交

预期结果： 名称和第一个 "From" 和 "To" 字段应为红色。

实际结果：只有名称在验证

Answer 1

您可以使用一个函数来获取空值的对象，然后使用另一个函数来获取一天。

const
    getRange = (startTime = "", endTime = "") => ({ startTime, endTime }),
    getDay = (length, fn, ...params) => Array.from({ length }, _ => fn(...params));

console.log(getDay(3, getRange));

初始值中使用的数组仅在完全定义时有效

Array used in initial values only works when fully defined

javascript

reactjs

formik

尝试次数

可重现的例子

详细版本

精简版