Невозможно передать значения базы данных в избыточную форму

Question

Работает.

var userData={
            first_name : "My First Name",
            last_name : "My Last Name",
            email : "My Email"
        };

Но это не работает

var userData={
            first_name : this.state.userData.first_name,
            last_name : this.state.userData.last_name,
            email : this.state.userData.email
        };

this.state.userData содержит данные пользователя. Это отображается в журналах. Вот полные коды.

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import store, {history} from '../../store/configureStore';

import {CLIENTS} from '../../constants/entity'
import * as crudAction from '../../actions/crudAction'

// Import custom components
import AddClientForm from '../../components/client/AddClientForm.js';
import {httpBase} from '../../utils/httpBaseUtil';

class AddClientContainer extends React.Component {
    constructor(props) {
        super(props);

        this.submitForm = this.submitForm.bind(this);
        this.state = {
            isFetching: true,
            userData: []
        };
    }

    componentDidMount(){
        httpBase().get('clients/'+2)
            .then((response) => {
                this.setState({ userData: response.data.data, isFetching: false })
            })
            .catch((error) => {
                console.log('Error: ',error);
            });

        this.setState({isFetching: false })
    }


    /**
     * Submit the form.
     *
     * @param {object} formProps
     */
    submitForm(formProps) {

        this.props.actions.submitForm(CLIENTS, formProps);
    }

    
    render() {
        if (this.state.isFetching){
            return(<p> Loading...</p>)
          }
        
        var userData={
            first_name : this.state.userData.first_name,
            last_name : this.state.userData.last_name,
            email : this.state.userData.email
        };
       
        return (
            <AddClientForm
                initialValues={userData}
                onSubmit={this.submitForm}
            />
        );
    }

}

/**
 * Map the actions to props.
 */
const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(Object.assign({}, crudAction), dispatch)
});

export default connect(null, mapDispatchToProps)(AddClientContainer)

Примечание. Моя заявка основана на этом шаблоне. https://github.com/Bikranshu/express-react-boilerplate

Answer 1

В вашем конструкторе вы устанавливаете userData в пустой массив и isFetching в true в вашем конструкторе.

Затем ваш компонент монтируется и вызывает componentDidMount, что делает вызов API, затем устанавливает isFetching в true,На данный момент ваш вызов API, вероятно, не завершен, что означает, что isFetching является ложным, а userData - пустым массивом.

Просто удалите последнюю строку в вашем методе componentDidMount, также я бы не инициализировал userData как пустой массив, поскольку его тип на самом деле является объектом.

 componentDidMount(){
    httpBase().get('clients/'+2)
        .then((response) => {
            this.setState({ userData: response.data.data, isFetching: false })
        })
        .catch((error) => {
            console.log('Error: ',error);
        });

    this.setState({isFetching: false }) // Remove this line.
}