Redux Form FieldArray 传递状态问题

Question

我正在使用 redux-form 字段数组来进行由数据类型（选择器）、键（文本）、值（文本）组成的多个数据输入。所以，我必须通过传递 redux 状态来触发选择器以根据值显示/隐藏字段。但我在传递数组状态时遇到了问题。这是我的代码。我试图通过 fields.map 但它没有用。有什么建议吗？

{/* <li class="list-group-item">
  {(touched || submitFailed) && error && <span>{error}</span>}
</li> */}
{fields.map((member, index) => ( <<<<<<<<<<<<<<<<<<<<<<<< how can i pass this to state?
  <li class="list-group-item" key={index}>
    {/* <h4>Member #{index + 1}</h4> */} 
    <div class="form-row">
        <Field
        name={`${member}.tipeData`} <<<< how can i pass this ${member} to state?
        component={renderDropdown}
        // data={colors}
        valueField="value"
        textField="color"/>
        {member}

        <Field
        name={`${member}.key`}
        label="Key"
        type="text"
        component={renderField}
        />

        {tipeDataValue === 'String' && <>
        <Field
        name={`${member}.value`}
        type="text"
        label="Value"
        placeholder="bundle"
        component={renderField}
        /></>}

        {tipeDataValue === 'Integer' && <>
        <Field
        name={`${member}.value`}
        type="number"
        label="Value"
        placeholder="bundle"
        component={renderField}
        /></>}

        {tipeDataValue === 'Boolean' && <>
        <Field
        name="tipeData"
        component={renderBoolean}
        data={colors}
        valueField="value"
        textField="color"/>
        </>}


        <div class="col">
            <button
            class="form-control btn btn-danger"
            type="button"
            title="Remove Member"
            onClick={() => fields.remove(index)}
            >X</button>
        </div>
    </div>
  </li>
))}

FieldArraysForm = reduxForm({
  form: "fieldArrays",
//   validate
})(FieldArraysForm);

const selector = formValueSelector('fieldArrays') // <-- same as form name
FieldArraysForm = connect(
  state => {
    // can select values individually
    // const member = selector(state, fields)
    const tipeDataValue = selector(state, 'tipeData')
    // or together as a group
    return {
      tipeDataValue,
    }
  } 
)(FieldArraysForm)

export default FieldArraysForm

Answer 1

也许可以尝试整合您的 reduxForm 和 connect 调用。

我的项目使用这种风格：

const formname = 'fieldArrays'
const selector = formValueSelector(formname)

class FieldArraysForm extends Component {


 render() {
  const {tipeData } = this.props
   ...
   return(
     ...
    )
  }
 }

export default compose(
connect(state => ({
tipeDataValue: selector(state,'tipeData')
})),
reduxForm({
form: formname,
}),
)(FieldArraysForm)