Question

我试图创建一组复选框，在选择时创建一个包含多个字段的对象数组。每当我在这里选中一个复选框时，它会出错并要求输入密钥。我有钥匙，所以我有点困惑。

路径：Form Component

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

    this.state = {
      rolesInterestedIn: [],
    };

    this.handleRoleTypeSelection = this.handleRoleTypeSelectionTwo.bind(this);
  }


  handleRoleTypeSelection(evt){
    evt.preventDefault();

    this.setState({
      rolesInterestedIn: [{
        roleType: evt.target.value,
        yearsOfExpereince: ''
      }]
    })
  }

  render() {
    return (
      <div className="paper">
        <Form className="roleAndSkillsForm" onSubmit={this.handleFormSubmit}>
          <CheckboxGroupTwo
            name={'typeOfWork'}
            options={['Audit - internal', 'Audit - external', 'Tax']}
            label={'What roles are you most interested in? *'}
            controlFunc={this.handleRoleTypeSelection}
          />
        </Form>
      </div>
    );
  }
}

路径：Checkboxgroup Component

const CheckboxGroup = (props) => (
  <FormGroup controlId={props.name}>
    {props.options.map(opt => {
      console.log(opt);
      return (
        <Checkbox
          name={props.name}
          key={opt}
          onChange={props.controlFunc}
          value={opt}
          checked={opt.selectedOption}
          inline
        >
          {opt}
        </Checkbox>
        );
      })}
    </FormGroup>
  );

  CheckboxGroup.propTypes = {
    name: PropTypes.string,
    options: PropTypes.array,
    selectedOption: PropTypes.string,
    controlFunc: PropTypes.func,
    label: PropTypes.string
  };

Answer 1

在给定数组上使用map方法时，使用index参数并将它们传递给key属性。

例如;

> optim(logLik, par=starting_values, method="Nelder-Mead", Y=y, X=dat, hessian = T)$par
[1]   0.4832514  -0.2276684  -0.3860800  32.7168490 -38.9030319
> coefficients(lm(y~x1+x2+x3))
(Intercept)          x1          x2          x3 
58.17347451 -0.06587320  0.13001865 -0.03624233

当您没有渲染项目的稳定ID时，您可以使用项目索引作为最后手段的关键：

const array = ['food', 'drinks', 'clothes'];
array.map((item, index) => {
    <li key={index}>{item}</li>
});

有关密钥和列表的更多信息，请参阅Lists and Keys - React。

复选框选择创建一个数组

1 个答案: