Reactjs Can'；t键入表单输入字段和键mot渲染

这件事我已经纠结了好几天了。在我的表单中，我有一个映射到渲染输入字段的对象数组，

SingleInput

。表单呈现并填充来自数据库的数据，但是，我有两个问题

我得到一个错误

数组或迭代器中的每个子级都应该有一个唯一的“key”属性。检查“CareerHistoryFormPage”的渲染方法。

如果查看我的

渲染库位置

我在

中输入一个键

输入字段渲染，但我无法键入它们

路径：
表单

export default class CareerHistoryFormPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      'position.uniqueId': '',
      'position.company': '',
      'position.title': '',
      data: [],
      profileCandidateCollectionId: null,
      errors: {}
    };

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const profileCandidateCollection = nextProps.profileCandidate;
    const profileCandidateCollectionId = profileCandidateCollection._id;
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
    console.log('componentWillReceiveProps: ', careerHistoryPositions);

    if (careerHistoryPositions) {
      const newData = careerHistoryPositions.map((position) =>
      ({
        'position.uniqueId': position.uniqueId || '',
        'position.company': position.company || '',
        'position.title': position.title || ''
      }));
      this.setState({
        data: newData
      })
    }
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }


  renderCareerPositions(props) {
    if(0 < this.state.data.length) {
      console.log(this.state.data);
      const careerPositions = this.state.data.map((position) =>
      <li key={position['posiiton.uniqueId']}>
        <SingleInput
          inputType={'text'}
          title={'Company'}
          name={'position.company'}
          controlFunc={this.handleInputChange}
          content={position['position.company']}
          placeholder={'Company'}
          bsSize={null}
        />
      </li>
    );
    return (
      <ul>
        {careerPositions}
      </ul>
    )
  }
}

render() {
  return (
    <form className='careerHistoryForm' onSubmit={this.handleFormSubmit}>
      {this.renderCareerPositions()}
      <input type='submit' className='btn btn-primary' value='Save' />
    </form>
  );
}
}

您输入的密钥是
位置['posiiton.uniqueId']
。有一个打字错误，很愚蠢的错误。但还是不会打字。
const SingleInput = (props) => (
  <FormGroup bsSize={props.bsSize} validationState={props.error ? 'error' : null}>
    <ControlLabel>{props.title}</ControlLabel>
    <FormControl
      className="form-input"
      name={props.name}
      type={props.inputType}
      value={props.content}
      onChange={props.controlFunc}
      placeholder={props.placeholder}
    />
    {props.error ? <HelpBlock>{props.error}</HelpBlock> : '' }
  </FormGroup>
);