我正在使用蚂蚁设计库,我有下一个代码,它是一个简单的动态形式,如下所示: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
问题:为什么会出现这些警告?