Redux-Form 初始值来自 [英] Redux-Form initial values from

问题描述

我正在尝试使用来自 API 的数据填写个人资料表单.不幸的是，在这种情况下，redux-form 不想与我合作.出于某种原因，无论我做什么，字段都是空的.

由于某种原因，设置固定值而不是从减速器传递的值效果很好.

也许这是因为我在动作创建者内部使用 redux-promise 进行 API 调用?我怎么能忍受它并摆脱它.这是我的表单组件.

import React, { Component } from 'react';import { reduxForm, Field } from 'redux-form';从'react-redux'导入{连接}；import { fetchRoleList, fetchUserData } from '../actions';类 UserEdit 扩展组件 {componentWillMount() {this.props.fetchRoleList();this.props.fetchUserData();}handleEditProfileFormSubmit(formProps) {控制台日志(formProps)；}getRoleOptions(selected_id) {如果(！this.props.profile){返回<选项>无数据;}返回 this.props.profile.roles.map(role => {return <option key={role.role_id} value={role.role_id}>{role.name}</option>;});}渲染场(道具){const { input, placeholder, label, value, type, meta: { touch, error } } = props;返回 (<fieldset className={`form-group ${ (touched && error) ?'有错误':'' }`}><label>{label}</label><input className="form-control" {...input} type={type} placeholder={placeholder}/>{感动&&错误&&<div className="error">{error}</div>}</fieldset>);}renderSelect({ input, placeholder, options, label, type, meta: { touch, error } }) {返回 (<fieldset className={`form-group ${ (touched && error) ?'有错误':'' }`}><label>{label}</label><select className="form-control" {...input}>{选项}</选择>{感动&&错误&&<div className="error">{error}</div>}</fieldset>);}使成为() {const { handleSubmit } = this.props;const user = this.props.profile.user;返回 (<div>{用户?用户邮箱:''}<form onSubmit={handleSubmit(this.handleEditProfileFormSubmit.bind(this))}><Field name="email" label="Email:" component={this.renderField} type="text" placeholder="[e-mail]" className="form-control"/><Field name="name" label="Name:" component={this.renderField} type="text" placeholder="John Doe" className="form-control"/><Field name="role" label="Role:" component={this.renderSelect} type="select" className="form-control" options={this.getRoleOptions()}/><button action="submit" className="btn btn-primary">编辑用户</button><Field name="password" label="Password:" component={this.renderField} type="password" className="form-control"/><Field name="passwordConfirm" label="Confirm Password:" component={this.renderField} type="password" className="form-control"/>{ this.props.errorMessage&&<div className="alert alert-danger"><strong>糟糕！</strong>{this.props.errorMessage}

}<button action="submit" className="btn btn-primary">注册！</button></表单>

);}}让 InitializeFromStateForm = reduxForm({形式:'initializeFromState'})(用户编辑);InitializeFromStateForm = 连接(状态 =>({个人资料:state.profile，初始值:state.profile.user}),{ fetchRoleList, fetchUserData })(InitializeFromStateForm);导出默认 InitializeFromStateForm;

我相信动作创建器也会很有用:

导出函数 fetchUserData(user_id) {用户 ID = 用户 ID ?用户身份 : '';const authorization = localStorage.getItem('token');const request = axios.get(`${ROOT_URL}/user/${user_id}`, {标头:{ 授权}});返回 {类型:FETCH_USER，有效载荷:请求};}

解决方案

您需要添加 enableReinitialize: true 如下.

let InitializeFromStateForm = reduxForm({形式:'initializeFromState'，enableReinitialize : true//这是必需的！！})(用户编辑)

如果您的 initialValues 道具更新，您的表单也会更新.

I'm trying to fill the profile form with data from API. Unfortunately redux-form doesn't want to cooperate with me in this case. For some reason fields stays empty whatever I do.

Setting the fixed values instead of values passed from reducer work well for some reason.

Maybe this is because I'm using redux-promise for API calls inside the action creators? How can I live with it and get rid of this. Here is my form component.

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';
import { fetchRoleList, fetchUserData } from '../actions';

class UserEdit extends Component {

    componentWillMount() {
        this.props.fetchRoleList();
        this.props.fetchUserData();
    }

    handleEditProfileFormSubmit(formProps) {
        console.log(formProps);
    }

    getRoleOptions(selected_id) {
        if (!this.props.profile) {
            return <option>No data</option>;
        }

        return this.props.profile.roles.map(role => {
            return <option key={role.role_id} value={role.role_id}>{role.name}</option>;
        });
    }

    renderField(props) {
        const { input, placeholder, label, value, type, meta: { touched, error } } = props;
        return (
        <fieldset className={`form-group ${ (touched && error) ? 'has-error' : '' }`}>
            <label>{label}</label>
            <input className="form-control" {...input} type={type} placeholder={placeholder} />
            {touched && error && <div className="error">{error}</div>}
        </fieldset>
        );
    }

    renderSelect({ input, placeholder, options, label, type, meta: { touched, error } }) {
        return (
        <fieldset className={`form-group ${ (touched && error) ? 'has-error' : '' }`}>
            <label>{label}</label>
            <select className="form-control" {...input}>
                {options}
            </select>
            {touched && error && <div className="error">{error}</div>}
        </fieldset>
        );
    }

    render() {
        const { handleSubmit } = this.props;

        const user = this.props.profile.user;

        return (
        <div> {user ? user.email : ''}
            <form onSubmit={handleSubmit(this.handleEditProfileFormSubmit.bind(this))}>
                <Field name="email" label="Email:" component={this.renderField} type="text" placeholder="[e-mail]" className="form-control"/>
                <Field name="name" label="Name:"  component={this.renderField} type="text" placeholder="John Doe" className="form-control"/>
                <Field name="role" label="Role:" component={this.renderSelect} type="select" className="form-control" options={this.getRoleOptions()}/>
                <button action="submit" className="btn btn-primary">Edit user</button>

                <Field name="password" label="Password:" component={this.renderField} type="password" className="form-control"/>
                <Field name="passwordConfirm" label="Confirm Password:" component={this.renderField} type="password" className="form-control"/>
                { this.props.errorMessage
                &&  <div className="alert alert-danger">
                        <strong>Oops!</strong> {this.props.errorMessage}
                    </div> }
                <button action="submit" className="btn btn-primary">Sign up!</button>
            </form>
        </div>
        );
    }

}

let InitializeFromStateForm = reduxForm({
    form: 'initializeFromState'
})(UserEdit);

InitializeFromStateForm = connect(
  state => ({
    profile: state.profile,
    initialValues: state.profile.user
  }),
  { fetchRoleList, fetchUserData }
)(InitializeFromStateForm);

export default InitializeFromStateForm;

I do believe action creator will be useful as well:

export function fetchUserData(user_id) {
    user_id = user_id ? user_id : '';

    const authorization = localStorage.getItem('token');
    const request = axios.get(`${ROOT_URL}/user/${user_id}`, {
      headers: { authorization }
    });

    return {
        type: FETCH_USER,
        payload: request
    };
}

解决方案

You need to add enableReinitialize: true as below.

let InitializeFromStateForm = reduxForm({
    form: 'initializeFromState',
    enableReinitialize : true // this is needed!!
})(UserEdit)

If your initialValues prop gets updated, your form will update too.

这篇关于Redux-Form 初始值来自的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！