Question

我现在已经和它搏斗了好几天了。我有一个对象数组，我正在映射到我的表单中呈现输入字段SingleInput。表单呈现并填充数据库中的数据，但是，我有两个问题。

我收到错误Each child in an array or iterator should have a unique "key" prop. Check the render method of "CareerHistoryFormPage".如果您查看我的renderCareerPositions，请在<li>中输入密钥。
输入字段呈现但我无法输入。

路径：Form

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>
  );
}
}

路径：SingleInput

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>
);

无法输入表单输入字段和键动画渲染

0 个答案: