如何使用 redux 表单值更新 redux 存储

Question

我正在使用 redux 表单和 redux 将表单值推送到存储/状态。首先，当我从不是 React 组件类的容器（INFORMATION COMPONENT）组件中将其作为道具传递时，我在表单组件中获得了未定义的状态，最后使用更新函数来更新商店。我是 React 新手，redux 表单让我失望

 // App Component


  class App extends Component {
    constructor(props) {
      super(props)
    }

    render() {
      return (
        <div className="App">
          <InformationFrom state={this.props}/>
        </div>
      );
    }
  }

  const mapStateToProps = (reduxState) => {
    return reduxState;
  }

  const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(actionCreators, dispatch);
  }

  export default connect(
    mapStateToProps, mapDispatchToProps
  )(App)





// InformationForm Component

    export default class InformationFrom extends React.Component {
        render() {
            return (
                <div>
                    {console.log("infoForm props >> ", this.props)}
                    <SimpleForm/>
                </div>
            )
        }
    }


// Form stateless function component


    const SimpleForm = props => {
        const { handleSubmit, pristine, reset, submitting } = props
        const state = this.props.state; // is undefined

        return (

            <div>
                { console.log("from state here >> ", this.props) }
                <form onSubmit={handleSubmit(this.updateStore(values,state))} name="InformForm">
                    <div>
                        <div>
                            <Field name="firstName" component={renderInput} type="text" placeholder="First Name" label={"First Name"} />
                            <Field name="lastName" component={renderInput} type="text" placeholder="Last Name" label={"Last Name"} />
                            <Field name="email" component={renderInput} type="text" placeholder="Email" label={"Email"} />
                        </div>
                    </div>

                    <div style={style.normal}>
                        <button type="submit" disabled={submitting}>
                            Submit
            </button>
                        <button type="button" disabled={submitting} onClick={reset}>
                            Clear Values
            </button>
                    </div>
                </form>

            </div>
        )
    }

    function updateStore(values, state){
    let newStore = {};

    newStore = {

    }


        return newStore;
    }

    const validate = values => {
        const errors = {}
        if (!values.firstName) {
            errors.firstName = "Required!"
        }
        return errors;
    }

    const style = {
        normal: {
            margin: '10px'
        }
    }

    export default reduxForm({
        form: 'simple', // a unique identifier for this form
        destroyOnUnmount: false,
        validate
    })(SimpleForm)

Answer 1

你没有在 InformationFrom 中将 props 传递给 SimpleForm，所以需要更新

export default class InformationFrom extends React.Component {
        render() {
            return (
                <div>
                    {console.log("infoForm props >> ", this.props)}
                    <SimpleForm/>
                </div>
            )
        }
    }

到

<SimpleForm  {...this.props} />

并通过连接导出以从 redux 获取状态

export default connect((state)=>state)( reduxForm({
        form: 'simple', // a unique identifier for this form
        destroyOnUnmount: false,
        validate
    })(SimpleForm) );