रेडक्स फॉर्म - प्रारंभिक वैल्यूज

Question

के साथ अपडेट नहीं कर रहा है मुझे रेडक्स-फॉर्म का उपयोग करके आंतरिक फॉर्म फ़ील्ड मानों को सेट करने के साथ कुछ समस्याएं हैं।

मैं रेडक्स-फॉर्म v6.0.0-rc.3 का उपयोग कर रहा हूं और v15.3.0 प्रतिक्रिया करता हूं।

तो यहां मेरी समस्या है, मेरे पास उपयोगकर्ताओं का ग्रिड है और जब उपयोगकर्ता पंक्ति पर क्लिक किया जाता है, तो मैं एक संपादन उपयोगकर्ता पृष्ठ पर जा रहा हूं और यूआरएल में उपयोगकर्ता आईडी भी शामिल कर रहा हूं। फिर उपयोगकर्ता के संपादन पृष्ठ पर, मैं आईडी को पकड़ रहा हूं और fetchUser (this.props.params.id) को कॉल कर रहा हूं जो एक एक्शन निर्माता है जो this.state.users देता है। मैं तो फोन करके रूपों inital मूल्यों को निर्धारित करने के लिए प्रयास कर रहा हूँ:

function mapStateToProps(state) { 
    return { initialValues: state.users.user } 
} 

मेरी समझ से, यह initialValues ​​state.users.user को स्थापित करना चाहिए और जब भी इस राज्य अद्यतन किया जाता है initialValues ​​रूप में अच्छी तरह अद्यतन किया जाना चाहिए। यह मेरे लिए मामला नहीं है। प्रारंभिक वैल्यू पहले उपयोगकर्ता पंक्ति पर क्लिक किए जा रहे हैं (यानी this.state.users.user के लिए पिछली स्थिति)। तो मैं इस परीक्षण करने और इस घटक के लिए एक बटन जोड़ सकते हैं और जब इसकी क्लिक किया मैं fetchUser फिर से एक उपयोगकर्ता आईडी के साथ बोल रहा हूँ मुश्किल में कोडित करने का फैसला किया:

this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');

यह सही ढंग से राज्य अपडेट कर रहा है लेकिन initialValues ​​के लिए मान कभी मत बदलना। राज्य अपडेट होने पर अपडेट नहीं हो रहा है। मैंने इस सटीक प्रक्रिया को रेडक्स-फॉर्म के पुराने संस्करण पर परीक्षण किया और यह अपेक्षा के अनुसार काम किया।

क्या मैं यहां कुछ गलत कर रहा हूं या क्या यह संस्करण मैं उपयोग कर रहा हूं।

उपयोगकर्ता प्रपत्र संपादित करें -

class UsersShowForm extends Component { 

    componentWillMount() { 
     this.props.fetchUser(this.props.params.id); 
    } 

    onSubmit(props){ 
     console.log('submitting'); 
    } 

    changeUser() { 
     this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3'); 
    } 

    renderTextField(field) { 
     return (
     <TextField 
     floatingLabelText={field.input.label} 
     errorText={field.touched && field.error} 
     fullWidth={true} 
     {...field.input} 
     />) 
    } 

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

     return(

      <div> 
       <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col"> 

        <Field name="emailAddress" component={this.renderTextField} label="Email Address"/> 

        <Field name="firstName" component={this.renderTextField} label="First Name"/> 

        <Field name="lastName" component={this.renderTextField} label="Last Name"/> 
       </form> 

       <RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true} /> 
      </div> 

     ); 
    } 
} 

function mapStateToProps(state) { 
    return { initialValues: state.users.user } 
} 

UsersShowForm = reduxForm({ 
    form: 'UsersShowForm' 
})(UsersShowForm) 

UsersShowForm = connect(
    mapStateToProps, 
    actions    
)(UsersShowForm) 

export default UsersShowForm 

उपयोगकर्ता प्रसारण -

import { 
    FETCH_USERS, 
    FETCH_USER 
} from '../actions/types'; 

const INITIAL_STATE = { all: [], user: {} }; 

export default function(state = { INITIAL_STATE }, action) { 
    switch (action.type) { 
     case FETCH_USERS: 
      return {...state, all: action.payload }; 
     case FETCH_USER: 
      return {...state, user: action.payload }; 
     default: 
      return state; 
    } 

} 

प्रसारण सूचकांक -

import { combineReducers } from 'redux'; 
import { reducer as formReducer } from 'redux-form'; 
import usersReducer from './users_reducer'; 

const rootReducer = combineReducers({ 
    form: formReducer, 
    users: usersReducer 
}); 

export default rootReducer; 

Answer 1

मैं redux फार्म v6.0.0 को अद्यतन करने के बाद एक ही समस्या का सामना करना पड़ रहा था -rc.4।

मैं सच

UsersShowForm = reduxForm({ 
    form: 'UsersShowForm', 
    enableReinitialize: true 
})(UsersShowForm) 

Answer 2

को enableReinitialize की स्थापना एक संसाधन से डेटा के साथ एक redux-form प्रपत्र पहले से भरना हल, आप initialValues प्रोप जब reduxForm कनेक्टर के साथ घटक/कंटेनर सजाने जो स्वचालित रूप से पढ़ा जाता है का प्रयोग करेंगे । यह महत्वपूर्ण है कि initialValues में कुंजियां फॉर्म फ़ील्ड पर name से मेल करें।

नोट: पहले reduxForm() सजावटी, और फिर connect() रेडक्स से लागू करना आवश्यक है। यह दूसरी तरफ काम नहीं करेगा।

का उपयोग redux फार्म 7.2.3:

const connectedReduxForm = reduxForm({ 
form: 'someUniqueFormId', 
    // resets the values every time the state changes 
    // use only if you need to re-populate when the state changes 
    //enableReinitialize : true 
})(UserForm); 

export default connect(
    (state) => { 
    // map state to props 
    // important: initialValues prop will be read by redux-form 
    // the keys must match the `name` property of the each form field 
    initialValues: state.user 
    }, 
    { fetchUser } // map dispatch to props 
)(connectedReduxForm) 

आधिकारिक दस्तावेज से: initialValues ​​प्रोप या reduxForm के लिए प्रदान की

वैल्यू() config पैरामीटर प्रपत्र राज्य में लोड किया जाएगा और उसके बाद "प्राचीन" के रूप में व्यवहार किया।वे वैल्यू भी होंगे जो रीसेट() प्रेषित होने पर वापस लौटाए जाएंगे। "प्रिस्टिन" मानों को सहेजने के अलावा, आपके फॉर्म को प्रारंभ करने से मौजूदा मानों को ओवरराइट कर दिया जाएगा।

अधिक जानकारी और official documentation