如何将对象传递到ant.design表单中

Question

我正在从后端动态加载数据。完成后，它会更新状态对象：

componentDidMount = ()=>{
let response = await axios.get('/api/entity/' + id);
if (response.data && response.data.result){
this.setState({item: response.data.entity});
} else {
this.setState({status: 'error', message: response.data.error || constants.defaultErrorMessage})
}
}

我在同一组件中也有一个表单。我不知道如何调用setFieldsValue函数将数据传递到表单中。

<Form 
onFinish={this.save}
initialValues={this.state.entity}>
{formItems}
<Form.Item>
<Button type="primary" htmlType="submit">
Save data
</Button>
</Form.Item>
</Form>

Answer 1

可以使用ref:

class Demo extends React.Component {
formRef = React.createRef();
componentDidMount() {
this.formRef.current.setFieldsValue({
username: 'Bamboo',
});
}
render() {
return (
<Form ref={this.formRef}>
<Form.Item name="username" rules={[{ required: true }]}>
<Input />
</Form.Item>
</Form>
);
}
}

参考：https://ant.design/components/form/v3