Javascript react redux表单无线电字段未更新选中的道具

Javascript react redux表单无线电字段未更新选中的道具,javascript,reactjs,redux,immutable.js,react-redux-form,Javascript,Reactjs,Redux,Immutable.js,React Redux Form,我有一个组件,它创建了一个包含无线电输入列表的字段。创建的组件似乎工作正常,呈现正确,分派正确的redux操作,并正确更新其状态。但是,所选的无线电输入从未在UI中进行检查 import React from 'react'; import Immutable from 'immutable'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; impor

我有一个组件,它创建了一个包含无线电输入列表的字段。创建的组件似乎工作正常,呈现正确,分派正确的redux操作,并正确更新其状态。但是,所选的无线电输入从未在UI中进行检查

import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Field } from 'react-redux-form/immutable';

const RadioField = ({ fieldId, label, model, hasError, options }) => {
  const error = hasError ? 'has-error' : '';
  return (
    <div className={`form-group ${error}`}>
      <label className="control-label" htmlFor={fieldId}>{label}</label>
      <Field model={model} id={fieldId} >
        {options.map(option => (
          <label
            key={`${fieldId}-${option.get('id')}`}
            htmlFor={`radio-${fieldId}-${option.get('value')}`}
            className="radio-inline"
          >
            <input
              id={`radio-${fieldId}-${option.get('value')}`}
              value={`${option.get('value')}`}
              type="radio"
            />
            {option.get('display')}
          </label>
        ))}
      </Field>
    </div>
  );
};

RadioField.defaultProps = {
  fieldId: 'radio-field-id',
  label: 'Radio Field:',
  model: '.radio',
  hasError: false,
  options: Immutable.List(),
};

RadioField.propTypes = {
  fieldId: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  model: PropTypes.string.isRequired,
  hasError: PropTypes.bool,
  options: ImmutablePropTypes.listOf(
    ImmutablePropTypes.shape({
      id: PropTypes.number,
      display: PropTypes.string,
      value: PropTypes.any,
    }),
  ).isRequired,
};

export default RadioField;
从“React”导入React;
从“不可变”导入不可变;
从“道具类型”导入道具类型;
从“react immutable proptypes”导入ImmutablePropTypes;
从'react redux form/immutable'导入{Field};
const RadioField=({fieldId,label,model,hasError,options})=>{
const error=hasError?'has error':'';
返回(
{label}
{options.map(option=>(
{option.get('display')}
))}
);
};
RadioField.defaultProps={
fieldId:'无线电字段id',
标签:“无线电场:”,
型号:'.radio',
错误:错,
选项:Immutable.List(),
};
RadioField.propTypes={
fieldId:PropTypes.string.isRequired,
标签:PropTypes.string.isRequired,
型号:PropTypes.string.isRequired,
hasError:PropTypes.bool,
选项:ImmutablePropTypes.listOf(
ImmutablePropTypes.shape({
id:PropTypes.number,
显示:PropTypes.string,
值:PropTypes.any,
}),
).要求,
};
导出默认无线电场;
我的直觉告诉我这与
字段
无法正确定位具有所选值的输入有关,或者redux状态没有正确传递给
字段的子
控件
组件


任何帮助都将不胜感激。谢谢

在进一步研究该问题后,发现创建的不可变
控件。radio
组件没有从应用程序的redux状态获取modelValue。将带有输入的
字段中的组件更改为多个通用
控制
组件,并为它们提供适当的无线电输入道具,似乎可以解决问题

下面是代码的样子

import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Control } from 'react-redux-form/immutable';

const RadioField = ({ fieldId, label, model, hasError, options }) => {
  const error = hasError ? 'has-error' : '';
  return (
    <div className={`form-group ${error}`}>
      <label className="control-label" htmlFor={fieldId}>{label}</label>
      <div id={fieldId}>
        {options.map(option => (
          <label key={`${fieldId}-${option.get('id')}`} htmlFor={`${fieldId}-${option.get('id')}`} className="radio-inline">
            <Control
              id={`${fieldId}-${option.get('id')}`}
              value={option.get('value')}
              model={model}
              isToggle
              type="radio"
            />
            {option.get('display')}
          </label>
        ))}
      </div>
    </div>
  );
};

RadioField.defaultProps = {
  fieldId: 'radio-field-id',
  label: 'Radio Field:',
  model: '.radio',
  hasError: false,
  options: Immutable.List(),
};

RadioField.propTypes = {
  fieldId: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  model: PropTypes.string.isRequired,
  hasError: PropTypes.bool,
  options: ImmutablePropTypes.listOf(
    ImmutablePropTypes.shape({
      id: PropTypes.number,
      display: PropTypes.string,
      value: PropTypes.any,
    }),
  ).isRequired,
};

export default RadioField;
从“React”导入React;
从“不可变”导入不可变;
从“道具类型”导入道具类型;
从“react immutable proptypes”导入ImmutablePropTypes;
从'react redux form/immutable'导入{Control};
const RadioField=({fieldId,label,model,hasError,options})=>{
const error=hasError?'has error':'';
返回(
{label}
{options.map(option=>(
{option.get('display')}
))}
);
};
RadioField.defaultProps={
fieldId:'无线电字段id',
标签:“无线电场:”,
型号:'.radio',
错误:错,
选项:Immutable.List(),
};
RadioField.propTypes={
fieldId:PropTypes.string.isRequired,
标签:PropTypes.string.isRequired,
型号:PropTypes.string.isRequired,
hasError:PropTypes.bool,
选项:ImmutablePropTypes.listOf(
ImmutablePropTypes.shape({
id:PropTypes.number,
显示:PropTypes.string,
值:PropTypes.any,
}),
).要求,
};
导出默认无线电场;

我将研究如何重新创建该问题,并在react redux表单的github上提交一个问题。

我也有相同/类似的问题,我的解决方法是
不起作用,但
起作用。