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

【问题标题】：Getting Parent props inside Redux form child在 Redux 中获取 Parent 道具表单子项
【发布时间】：2018-02-28 15:31:45
【问题描述】：

React Newbee Here 使用 react redux 和 redux-form

我想在Form.js 内部使用App.js 检索到的数据目前我正在将{this.props.data} 传递给<Form /> 我无法看到或访问App.js 内部的App.js 道具<Form /> 组件，相反我只能见 reduxForm Props ，如何在<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));

【问题讨论】：

标签： javascript reactjs redux redux-form

【解决方案1】：

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

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

在您的表单中，您可以使用this.props.formData 访问父级的数据；

【讨论】：

它给了我两次 undefined ，你能指导我在发送到<Form > 之前如何检查 undefined 吗？也许这就是导致此错误的原因
如果你正在处理你的 redux data 状态，它取决于你在 data 减速器中设置的初始状态，如果数据未定义，你还期望什么行为？
我在谈论 App.js 中的return <Form formData={this.props.data} />;，我怎么只能通过this.props.data 中的值而不是未定义？
您可以像formData={this.props.data && this.props.data} 一样有条件地传递它，但这毫无意义，因为结果也将是未定义的。您可能希望像这样传递默认值：formData={this.props.data ? this.props.data : { dataProp: 'defaultValue' }}

【解决方案2】：

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

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

代替

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

试试

export default renderForm

编辑：

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

【讨论】：

当我将其更改为 export default renderForm 时，它给我一个错误提示“字段必须位于用 reduxForm() 装饰的组件内”