带有路径“...”的多个字段设置了“initialValue”。无法决定选择哪一个,使用 react js

IT技术 javascript reactjs
2021-05-01 13:02:54

我正在使用蚂蚁设计库,我有下一个代码,它是一个简单的动态形式,如下所示:https : //codesandbox.io/s/clever-frog-gmkgv?file=/index.js

波纹管是我的代码:

        <Form.List name="names">
          {(fields, { add }) => {
            return (
              <div>
                {fields.map(field => (
                  <Space
                    key={field.key}
                  >
                    <div>
                      <Form.Item
                        {...field}
                        name={[field.name, 'title']}
                        fieldKey={[field.fieldKey, 'title']}
                        rules={[
                          {
                            required: true,
                            message: 'Please input title!',
                          },
                        ]}
                      >
                        <Input placeholder="title" />
                      </Form.Item>
                      <div className="class_9">
                        <Form.Item
                          {...field}
                          name="data1"
                          key={`data1{field.name}`}
                          fieldKey={[field.fieldKey, 'data1']}
                          initialValue={moment().add(110, 'days')}
                          rules={[
                            {
                              required: true,
                              message: 'Missing',
                            },
                          ]}
                        >
                          <DatePicker
                            showToday={false}
                            bordered
                            suffixIcon={false}
                            onChange={change}
                          />
                        </Form.Item>
                          <Form.Item
                            {...field}
                            name="time2"
                            fieldKey={[field.fieldKey, 'time2']}
                            key={`time2{field.name}`}
                            initialValue={moment('02:00', 'HH mm')}
                            rules={[
                              {
                                required: false,
                                message: 'Missing',
                              },
                            ]}
                          >
                            <TimePicker
                              allowClear={false}
                              format="HH:mm"
                              suffixIcon={false}
                            />
                          </Form.Item>
                          <Form.Item
                            {...field}
                            name="time3"
                            fieldKey={[field.fieldKey, 'time3']}
                            key={`time3{field.name}`}
                            initialValue={moment('15:30', 'HH mm')}
                            rules={[
                              {
                                required: false,
                                message: 'Missing',
                              },
                            ]}
                          >
                            <TimePicker
                              allowClear={false}
                              format="HH:mm"
                              style={{ paddingLeft: '5px' }}
                              suffixIcon={false}
                              
                            />
                          </Form.Item>
                         
                        </div>
                      </div>
                      <Form.Item className="submit">
                        <Button  htmlType="submit">
                          submit
                        </Button>
                      </Form.Item>
                    </div>
                  </Space>
                ))}

                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    block
                  >
                    Add field
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>

当我点击add field按钮时,我得到:

Multiple Field with path 'names.data1' set 'initialValue'. Can not decide which one to pick
Multiple Field with path 'names.time2' set 'initialValue'. Can not decide which one to pick
Multiple Field with path 'names.time3' set 'initialValue'. Can not decide which one to pick

问题:为什么会出现这些警告?

1个回答

你需要改变你的静态

              <Form.Item
                {...field}
                name="time1"

动态name属性

              <Form.Item
                {...field}
                name={[field.name, "time1"]}