AntD為Form的List設置默認值 （antd form.list 設置默認值 ）

import React from "react";
function demo() {
  const FormConfig = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const [form] = Form.useForm();
  const data = "2,3"; //數據源

  /**
   * 適配器-可以根據自己的數據類型自行改變數據結構
   * @param {*} data
   * @returns
   */
  const trans_val = (data) => {
    let arr = data.split(",");
    let new_arr = [];
    new_arr = arr.map((item, index) => ({
      val: item, //設置字段，在form.list下的form.item中指定的字段值
      fieldKey: index,
      isListField: true,
      key: index,
      name: index,
    }));
    return new_arr;
  };

  useEffect(() => {
    form.setFieldsValue({
      trigger_conds_group: trans_val(data),
    });
  }, []);
  return (
    <div>
      <Form form={form} name="form_in_modal" hideRequiredMark={true}>
        <Form.List
          label="觸發條件組合"
          name="trigger_conds_group"
          labelCol={FormConfig.labelCol.span}
          rules={[
            { required: true, message: "請輸入觸發條件" },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || value?.length === 0) {
                  message.error("請添加觸發條件");
                  return Promise.reject(new Error("請添加觸發條件"));
                }
                return Promise.resolve();
              },
            }),
          ]}
        >
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, fieldKey, ...restField }) => (
                <div
                  key={key}
                  style={{
                    display: "flex",
                    marginBottom: 8,
                    alignItems: "center",
                  }}
                >
                  <Form.Item
                    {...restField}
                    label="觸發條件"
                    name={[name, "val"]}
                    fieldKey={[fieldKey, "val"]}
                    rules={[{ required: true, message: "請輸入觸發條件" }]}
                  >
                    <Input
                      placeholder="請輸入觸發條件"
                      addonAfter={
                        <MinusCircleOutlined
                          style={{ marginLeft: "8px" }}
                          onClick={() => remove(name)}
                        />
                      }
                    />
                  </Form.Item>
                </div>
              ))}
              <Form.Item
                wrapperCol={{
                  span: FormConfig.wrapperCol.span,
                  offset: FormConfig.labelCol.span,
                }}
              >
                <Button
                  type="dashed"
                  onClick={() => {
                    // add_trigger_h(add);
                    add();
                  }}
                  block
                  icon={<PlusOutlined />}
                >
                  添加觸發條件
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </div>
  );
}
export default demo;

注：這里面有個地方需要注意 form.list 下的form.item 表單中的input、Select元素不能用東西包裹，結構 form.item->Input，否則會導致指定初始值設置失敗。