在 Redux 表单子项中获取 Parent 道具

Question

React Newbee 这里使用 react redux 和 redux-form

我想在 Form.js 中使用 App.js 检索的数据目前我正在将 {this.props.data} 传递给 <Form /> 我看不到或访问 App.js <Form /> 组件内的道具，相反我只能看到 reduxForm 道具，我如何在 <Form /> 内访问 this.props.data？

我有一个要获取用户数据的组件：

App.js

import React, { Component } from "react";

import { connect } from "react-redux";

import * as actions from "../actions";

import Form from "./Form";

class Questions extends Component {
    componentDidMount() {
        this.props.fetchQuestion();
    }
    render() {
        return <Form formData={this.props.data} />;
    }
}
function mapStateToProps({ data }) {
    return { data };
}
export default connect(mapStateToProps, actions)(Questions);

Form.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { Field, FieldArray, reduxForm } from "redux-form";
import * as actions from "../actions";

class renderForm extends Component {
  renderField({ input, label, type, meta: { touched, error } }) {
    return (
      <div>
        <label>{label}</label>
        <div>
          <input {...input} type={type} placeholder={label} />
          {touched && error && <span>{error}</span>}
        </div>
      </div>
    );
  }
  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <Field
          name="clubName"
          type="text"
          component={this.renderField}
          label="Club Name"
        />
        <FieldArray name="questions" component={this.renderQuestion} />
        <div>
        </div>
      </form>
    );
  }
}

function mapStateToProps({ data }) {
  return { data };
}

export default reduxForm({
  form: "fieldArrays"
})(connect(mapStateToProps, { actions })(FieldArraysForm));

Answer 1

在这种情况下，您不需要将子组件 (form.js) 连接到 redux，因为您正在从父组件传递 props。

当您 mapSateToProps() 时，您将覆盖 this.props.data 的值。

而不是

export default reduxForm({
  form: "fieldArrays"
})(connect(mapStateToProps, { actions })(FieldArraysForm));

尝试

export default renderForm

编辑：

此外，我认为您应该导出 renderForm 而不是 reduxForm

Answer 2

在您的情况下，您应该只使用 reduxForm HOC 而无需连接到 redux（connect() 包装器）：

export default reduxForm({
  form: "fieldArrays"
})(renderForm);

在您的表单中，您可以使用 this.props.formData;

从父级访问数据

在 Redux 表单子项中获取 Parent 道具

Getting Parent props inside Redux form child

javascript

reactjs

redux

redux-form