The new version of antd cannot use useState with initialValue to backfill data
The backfill data of the new version is like this
...
const [form] = Form.useForm();
useEffect(()=>{
if(props.match.params.id){
oneApi(props.match.params.id).then(res=>{
console.log("res",res);
form.setFieldsValue({name:res.product.name,price:res.product.price});
})
}
},[]);
...
<Form
form={form}
{...layout}
name="basic"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="名字"
name="name"
rules={[{ required: true, message: '请输入商品名字!' }]}
>
<Input placeholder="请输入商品名字" />
</Form.Item>
<Form.Item
label="价格"
name="price"
rules={[
// { required: true, message: '请输入商品价格!' },
{
validator: (_, value) =>{
console.log("value",value);
return value ? Promise.resolve() : Promise.reject(new Error('自定义规则,你应该输入商品价格'))
}
}
]}
>
<Input />
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
...