无法将数据库值传递给 redux 表单

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 为 false，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.
}