Redux Form, как установить InitialValue из состояния компонентов?

В моем компоненте у меня есть следующее:

componentWillReceiveProps(nextProps) {
  if (nextProps.industries.items.length > 0) {
    this.setState({
      industry_item_id : nextProps.industries.items.find(el => el.title === "XXXX").id
    });
  }

Затем я хочу использовать это значение в начальном значении моей Redux Form следующим образом:

myForm = reduxForm({
  form: 'myForm',
  initialValues: {
    industry_id: this.state.industry_item_id
  },  
})(myForm);

...
export default connect(mapStateToProps, mapDispatchToProps)(myForm);

Как я могу использовать this.state в начальных значениях? Кроме того, this.state.industry_item_id не определен в ComponentMount. Будет ли это работать, когда значение this.state.industry_item_id установлено с componentWillReceiveProps(nextProps)?

Я использую "redux-form": "^6.6.3".


reactjs redux redux-form
person AnApprentice    schedule 07.08.2017    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Вы можете использовать действие инициализации для установки начальных значений вашей формы в любое время (т.е. когда все значения, которые вы хотите установить, определены).

import { initialize } from 'redux-form';

затем где-то в вашем компоненте используйте:

this.props.dispatch(initialize(<name of your form>, <values you want to set>));
person Dario    schedule 07.08.2017

arrow_upward
2
arrow_downward

В вашей функции mapStateToProps в вашем контейнере добавьте следующее:

const mapStateToProps = (state, ownProps) => (
    initialValues: fromJS({
           industry_id: ownProps.industry_item_id
        })
)
person user7334203    schedule 07.08.2017

arrow_upward
0
arrow_downward

Это хорошая ссылка на указанную выше проблему: http://redux-form.com/6.0.0-alpha.4/examples/initializeFromState/

componentWillReceiveProps(nextProps) {
    if (nextProps.industries.items.length > 0) {
       this.setState({
         industry_item_id : nextProps.industries.items.find(el => el.title === "XXXX").id
       }, () => {
        // callback of setState, because setState is async.
        // dispatch the action via this function.
        this.props.load(this.state.industry_item_id);
       });
    }
 }


 myForm = reduxForm({
     form: 'myForm',
     initialValues: {
         // Connect the value through industry reducer.
         industry_id: state.industryReducer.id
     },  
 })(myForm);

 ...
 export default connect(mapStateToProps, mapDispatchToProps)(myForm);

Действия и редукторы:

const LOAD = 'redux-form-examples/account/LOAD'

const reducer = (state = {}, action) => {
  switch (action.type) {
    case LOAD:
      return {
        data: action.data
      }
    default:
      return state
  }
}

/**
 * Simulates data loaded into this reducer from somewhere
 */
export const load = data => ({ type: LOAD, data })

export default reducer
person Yogesh Chuahan    schedule 07.08.2017

arrow_upward
0
arrow_downward

Использование этого в моем компоненте reduxForm сработало для меня:

componentWillMount () { this.props.initialize({ name: 'value' }) }

Где «имя» соответствует имени поля формы. Надеюсь, это поможет.

person user42488    schedule 17.12.2019