将 "record" 属性 设置为响应来自 API 调用 React/react-admin 的数据

Question

在我的 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 中执行此操作。

Answer 1

这可能只会帮助您接近。但是，一种方法可能是使 MyCreate 成为 class 组件并分派 API 对 componentDidMount 上默认值的调用。您也可以根据情况更快地发送它。在生产中执行此操作的更好方法，但作为示例...

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 道具，这几乎是为此目的而设计的。 https://marmelab.com/react-admin/CreateEdit.html#default-values