Redux-Form 초기값:

Redux-Form 초기값:

API의 데이터로 프로파일 폼을 채우려고 합니다.유감스럽지만 리덕스 폼은 이번 건에 대해 저와 협력하고 싶지 않습니다.어떤 이유에서인지 필드가 비어 있습니다.

리듀서에서 전달된 값 대신 고정 값을 설정하면 어떤 이유로든 잘 작동합니다.

액션 크리에이터 내부에서 API 호출에 redux-promise를 사용하고 있기 때문일까요?어떻게 하면 이걸 없앨 수 있을까요?여기 제 폼 컴포넌트가 있습니다.

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="email@gmail.com" 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;

액션 크리에이터도 도움이 될 것입니다.

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
    };
}

를 추가해야 합니다.enableReinitialize: true이하와 같습니다.

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

initialValues 프로펠이 갱신되면 폼도 갱신됩니다.

를 설정하려면initialValues를 적용하는 것이 중요합니다.reduxForm()이전의 장식가connect()레독스의 데코레이터.장식자의 순서가 반전된 경우 저장 상태로부터 필드가 채워지지 않습니다.

const FormDecoratedComponent = reduxForm(...)(Component)
const ConnectedAndFormDecoratedComponent = connect(...)(FormDecoratedComponent)

값을 처음 설정할 뿐만 아니라 상태가 변경될 때마다 폼을 다시 채워야 하는 경우enableReinitialize: true

이 답변에서 간단한 예를 찾아보세요.

공식 문서와 전체 예를 읽어 보십시오.

이 문제에 대한 자세한 내용은 여기를 참조하십시오.

그럼, 다음과 같이 해 봅시다.

• 폼에 API 데이터 로드
• 로드 시 폼을 업데이트합니다(일명.initialValues)

@FurkanO는 동작할 수 있지만, 가장 좋은 방법은 모든 비동기 데이터를 얻었을 때 폼을 로드하는 것입니다.이 경우 상위 컴포넌트/컨테이너를 작성하면 됩니다.

UserEditLoader.jsx

componentDidMount() {
  // I think this one fits best for your case, otherwise just switch it to
  // componentDidUpdate
  apiCalls();
}
/* api methods here */
render() {
 const { profile } = this.props;
 return (
   {profile && <UserEdit profile={profile} />}
 );
} 

여기서 해야 할 일은 기본적으로UserEditLoaderAPI 기능을 실행하여 상태(또는 redux가 연결된 경우 소품)를 업데이트하는 것입니다.프로파일 변수가 비어 있지 않은 경우(예상했던 데이터를 얻었음을 의미함) 마운트UserEdit프로필이 소품으로 되어 있습니다.

initialize()는 redexForm에서 제공하는 프로포트로 폼 값을 채우기 위해 사용할 수 있습니다.

change()는 필드 값을 변경하기 위해 reduxFrom에서 제공하는 다른 도구입니다.

import * as React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

const submit = values => {
    // print the form values to the console
    console.log(values)
}

interface Props {
    history?: any;
    location?: any;
    session?: any;
    handleSubmit?: Function;
    initialize?: Function;
    change?: Function;
}

class ContactForm extends React.Component<Props, any> {
constructor(props, state) {
    super(props, state);
    this.state = {
        value: ''
    };
}

componentDidMount() {
    const { initialize, session, location } = this.props;

    console.log(location.pathname);

    if (session && session.user) {
        const values = {
            firstName: session.user.name,
            lastName: session.user.lastName,
            email: session.user.email
        };
        initialize(values);
    }
}

componentWillReceiveProps(nextProps) {
    const { initialize, session } = this.props;

    if (nextProps.session !== session) {
        if (nextProps.session && nextProps.session.user) {
            const values = {
                firstName: nextProps.session.user.name,
                lastName: nextProps.session.user.lastName,
                email: nextProps.session.user.email
            };
            initialize(values);
        } else {
            const values = {
                firstName: null,
                lastName: null,
                email: null
            };
            initialize(values);
        }
    }
}

render() {
    const { handleSubmit, change } = this.props;
    return (
        <React.Fragment>
            <form onSubmit={handleSubmit(submit)}>
                <div>
                    <label htmlFor="firstName">First Name</label>
                    <Field name="firstName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="lastName">Last Name</label>
                    <Field name="lastName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="email">Email</label>
                    <Field name="email" component="input" type="email" />
                </div>
                <button type="submit">Submit</button>
            </form>



            <input type="text" value={this.state.value}
                onChange={(e) => {
                    this.setState({ value: e.target.value });
                    change('firstName', e.target.value);
                }}
            />
        </React.Fragment>
    );
}
}

export default connect((state) => {
    return {
        session: state.session
    }
},
{}
)(withRouter((reduxForm({
    form: 'contact'
})(ContactForm))));

이 경우,enableReinitialize : true트릭이 동작하지 않습니다.각 필드를 갱신할 수 있습니다.initialValues변경.

componentWillReceiveProps(nextProps) {
    const { change, initialValues } = this.props
    const values = nextProps.initialValues;

    if(initialValues !== values){
        for (var key in values) {
            if (values.hasOwnProperty(key)) {
                change(key,values[key]);
            }
        }
    }
}

나는 한번도 함께 일한 적이 없다.FieldsArray여기에서는 안 될 것 같아요

스테이트리스 기능 컴포넌트의 경우는, 다음과 같이 실행할 수 있습니다.

componentWillMount() {
  this.props.initialize({ discountCodes: ["ABC200", "XYZ500"] });
}

클래스의 경우는, 다음과 같이 실행할 수 있습니다.

const mapStateToProps = state => (
  {
    initialValues: {
      discountCodes: ["ABC200", "XYZ500"]
  }
);

언급URL : https://stackoverflow.com/questions/41267037/redux-form-initial-values-from