Redux Form，如何从组件状态设置 InitialValue？

Question

在我的组件中，我有以下内容：

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

然后我想在我的 Redux 表单的 initialValue 中使用这个值，如下所示：

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

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

如何在 initialValues 中使用 this.state？此外，this.state.industry_item_id 未在 ComponentMount 上定义，当 this.state.industry_item_id 的值设置为 componentWillReceiveProps(nextProps)?[=14= 时，这是否有效？ ]

我正在使用 "redux-form": "^6.6.3"。

Answer 1

您可以随时使用初始化操作来设置表单的初始值（即当您要设置的所有值都已定义时）。

import { initialize } from 'redux-form';

然后在您的组件中的某处使用：

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

Answer 2

这是对上述问题的一个很好的参考： 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

Answer 3

在容器中的 mapStateToProps 函数中添加：

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

Answer 4

在我的 reduxForm 组件中使用它对我有用：

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

其中'name'对应表单域的名称。希望对你有帮助。

Redux Form，如何从组件状态设置 InitialValue？

Redux Form, how to set InitialValue from the components state?

reactjs

redux

redux-form