Установите свойство «запись» для данных ответа на вызов API в 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 / реагировать-admin.

Answer 1

Это может только помочь вам приблизиться.Но одним из способов может быть создание MyCreate компонента класса и отправка вызова 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 вы можете использовать опцию defaultValues ​​для <SimpleForm>, которая в значительной степени предназначена для этой цели.,https://marmelab.com/react-admin/CreateEdit.html#default-values