Инициализация формы с данными ответа из API в реагировать-администратор / реагировать

Question

В моем приложении реакции-администратора есть форма FooCreate.При открытии этой формы я хотел бы заполнить значения по умолчанию для элементов формы данными, полученными из внешнего API.

Я читал, что componentDidMount() часто является предпочтительным местом для вызова внешних API.URL вызывается, но я понятия не имею, как я могу передать данные ответа в форму FooCreate.

Как я могу

class MyCreate extends Create {
    async componentDidMount() {
        try {
            const response = await API.get("/foo");
            // response contains a field like response.name
            // How can populate the below FooCreate with default values retrieved in response?
        } catch (error) {
            console.error(error);
        }
    }
}

export const FooCreate = props => (
    <MyCreate {...props}>
        <SimpleForm>
            {/* This input element shall be populated with the value from response.name */}
            <DisabledInput source="name" defaultValue="John Doe" />
        </SimpleForm>
    </MyCreate>
);

Answer 1

Сделай так:

class MyCreate extends Create {

    constructor(props) {
      super(props);
      this.state = {};
    }

    async componentDidMount() {
        try {
            const response = await API.get("/foo");
            this.setState({response})
        } catch (error) {
            console.error(error);
        }
    }

   render() {
        return <SimpleForm>
            {this.state.response}
            <DisabledInput source="name" defaultValue="John Doe" />
        </SimpleForm>
   }
}

export const FooCreate = props => (
    <MyCreate {...props} />
);