Ant Design中如何在From.List中初始化RangePacker

Question

我想编辑动态字段。 Form.Item (name = timeSlotDate) 之一是 RangePicker，它将显示 TypeError: date1.isAfter is not a function when我初始化值。同时，我的其他 Form.Item 工作正常。

很明显，The Date只支持时刻格式，但我提供了数组格式。

请帮我处理一下。


const timeSlotObj = [
    {
        "slotId": 0,
        "venue": "We Go Mall 地下中庭 (馬鞍山新市鎮保泰街16號)",
        "timeSlotDate": [
            "2021-05-28T07:24:14.747Z",
            "2021-05-29T07:24:14.747Z"
        ],
        "price": "500",
        "quota": "30"
    },
    {
        "slotId": 1,
        "venue": "We Go Mall 地下中庭 (馬鞍山新市鎮保泰街16號)",
        "timeSlotDate": [
            "2021-05-30T07:24:22.927Z",
            "2021-06-02T07:24:22.927Z"
        ],
        "price": "1200",
        "quota": "20"
    },
    {
        "slotId": 2,
        "venue": "We Go Mall 地下中庭 (馬鞍山新市鎮保泰街16號)",
        "timeSlotDate": [
            "2021-05-28T07:24:35.196Z",
            "2021-06-02T07:24:35.196Z"
        ],
        "price": "1800",
        "quota": "30"
    }
]



 <Form
          name="dynamic_form_nest_item"
          onFinish={onFinish}
          initialValues={timeSlotObj}
        >
          {console.log(typeof timeSlotObj)}
          {console.log(timeSlotObj.timeSlots)}
          <Form.List name="timeSlots">
            {(fields, { add, remove }) => (
              <>
                {fields.map((field) => (
                  <Space
                    key={field.key}
                    style={{ display: "flex", marginBottom: 8 }}
                    align="baseline"
                  >
                    <Form.Item
                      name="slotId"
                      fieldKey={[field.fieldKey, "slotId"]}
                      hidden
                    ></Form.Item>

                    <Form.Item
                      name={[field.name, "venue"]}
                      fieldKey={[field.fieldKey, "venue"]}
                      //   initialValue={timeSlotObj.timeSlots[field.fieldKey].venue}>
                      rules={[
                        { required: true, message: "「vune" },
                      ]}
                    >
                      <Input placeholder="vune" />
                    </Form.Item>
                    <Form.Item
                      {...field}
                      name={[field.name, "timeSlotDate"]}
                      fieldKey={[field.fieldKey, "timeSlotDateKey"]}
                      rules={[{ required: true, message: "timeslot" }]}
                    >
                      <RangePicker
                        name="timeSlotDate"
                        allowClear={false}
                        onChange={selectDate}
                      />
                    </Form.Item>

                    <Form.Item
                      name={[field.name, "price"]}
                      fieldKey={[field.fieldKey, "price"]}
                      rules={[{ required: true, message: "「Price" }]}
                    >
                      <Input placeholder="price" />
                    </Form.Item>
                    <Form.Item
                      name={[field.name, "quota"]}
                      fieldKey={[field.fieldKey, "quota"]}
                      rules={[
                        { required: true, message: "「Quota numbers" },
                      ]}
                    >
                      <Input placeholder="Quota" />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  </Space>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                  >
                   Add a new time slot
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>

          <Form.Item>
            <Button type="primary" htmlType="submit">
             Update
            </Button>
          </Form.Item>
        </Form>

Answer 1

我的问题已经解决了。在我从 API 获取数据后，格式已更改为日期格式，因此显示错误。所以，我在初始化表单格式之前更改了日期格式。

下面是我的代码：

const formatedTimeSlotFrom = [];
      apiData.timeSlotsFrom[0].timeSlots.map((data) => {
        const newObject = {
          price: data.price,
          quota: data.quota,
          slotId: data.slotId,
          timeSlotDate: [
            moment(data.timeSlotDate[0]),
            moment(data.timeSlotDate[1]),
          ],
          venue: data.venue,
        };
        formatedTimeSlotFrom.push(newObject);
      });
      const timeSlots = { timeSlots: formatedTimeSlotFrom };
      setTimeSlotObj(timeSlots);

Ant Design中如何在From.List中初始化RangePacker

How to init RangePacker in the From.List in the Ant Design

reactjs

antd