在我的react-admin
应用程序中有一个Create
组件。我读到可以提供record
属性来初始化Create
组件,如下所示。
const MyRecord = {
year: 2000,
name: "John Doe"
};
export const MyCreate = props => (
<Create record={MyRecord} {...props}>
<SimpleForm>
<DisabledInput source="year" />
<DisabledInput source="name" />
</SimpleForm>
</Create>
);
这有效,但现在我想要MyRecord
,即record
来填充API调用的响应。像这样(伪代码)......
const response = API.get("/resource");
const MyRecord = {
year: response.data.year,
name: response.data.name
};
但是我不知道如何在React / react-admin中执行此操作。
这可能只会帮助您关闭。但是,一种方法可能是使MyCreate
成为一个类组件,并为componentDidMount上的默认值调度API调用。根据场景,您也可以更快地发送它。在生产中更好的方法,但作为一个例子......
class MyCreate extends React.Component {
constructor(props) {
super(props);
// these will be our defaults while fetch is occurring.
this.state = {
record: {
year: 1900,
name: '',
id: 0
}
};
}
componentDidMount() {
//don't actually fetch in cdm
fetch('/resource').then(resp => this.setState({record: resp}))
}
render() {
return (
<Create {...this.props}>
<SimpleForm defaultValues={this.state.record}>
<DisabledInput source="year" />
<DisabledInput source="name" />
</SimpleForm>
</Create>
);
}
}
另外,除了覆盖record
之外,您还可以在<SimpleForm>
上使用defaultValues prop,它几乎是为此目的而设计的。 https://marmelab.com/react-admin/CreateEdit.html#default-values