无法设置ToggleButtonGroup的defaultValue

Question

当我用来自componentWillReceiveProps(nextProps)的数据加载ToggleButtonRadio组件时， defaultValue似乎使用未定义填充，并且当数据通过时不会更新。 如果数据来自constructor(props) ，则组件将按预期工作，因为在创建组件时设置了defaultValue 。 我没有收到错误，所以我无法弄清楚我所缺少的。

这是react-bootstrap组件。

组件： ToggleButtonRadio

const ToggleButtonRadio = (props) => (
  <div>
    <ButtonToolbar key={props.name}>
      <ToggleButtonGroup type="radio" name={props.name} defaultValue={props.selectedOption}>
        {props.options.map(opt =>
          <ToggleButton
            key={opt}
            value={opt}
            onChange={props.controlFunc}>{opt}
          </ToggleButton>
        )}
      </ToggleButtonGroup>
    </ButtonToolbar>
  </div>
);

页面： JobDetailsPage

export default class JobDetailsPage extends React.Component {
  constructor(props) {
    super(props);

    const jobsCollection = props.jobsCollection;
    const contractType = jobsCollection && jobsCollection.contractType;

    this.state = {
      contractType: contractType
    };
  }

  componentWillReceiveProps(nextProps) {
    const jobsCollection = nextProps.jobsCollection;
    const contractType = jobsCollection && jobsCollection.contractType;

    this.setState({
      contractType: contractType
    });
  }

  render() {
    return (
      <div>
        <ToggleButtonRadio
          options={['Permanent', 'Part time', 'Contract', 'Temp']}
          name={'contractType'}
          label={'Contract type'}
          controlFunc={this.handleInputChange}
          selectedOption={this.state.contractType}
        />
      </div>
    );
  }
}

Answer 1

似乎有效的解决方案是添加密钥。

<ToggleButtonRadio
 key={this.state.contractType ? 'loaded' : 'notLoaded'}
 options={['Permanent', 'Part time', 'Contract', 'Temp']}
 name={'contractType'}
 label={'Contract type'}
 controlFunc={this.handleInputChange}
 selectedOption={this.state.contractType}
/>