When editing dropdown of form I've got this issue: TypeError: Cannot read property 'name' of undefined

Question

我想获取在表单中创建对象时插入的值。在我的例子中，我有一个叫 JSON 的人，他与国籍有 1:1 关系。我的情况是一人一国籍

在个人表格中有一个名为国籍的下拉列表，其中包含来自 API 的所有国籍。

这就是我如何在 class Person.

中设置国籍状态和 handleChangeInput 方法

constructor(props){
  super(props);

  this.state = {
    nationality: props.nation.name
  };
};


onChange = (e) => {
  this.setState({
    nationality: e.target.value
  })
}

还有我的下拉列表所在的字段：

<Field
   className="custom-select d-block w-100" name='nationality' }
   value={this.state.nationality} onChange={this.onChange.bind(this)}
   component="select" placeholder={!input.value ? 'Please, insert a
                                   nationality' : input.value}>

   <option value="" disabled hidden style={{fontStyle:
                                   'arial',fontWeight:'bold'}}>Please , insert a nationality</option>

   { this.props.listNationalities.map(nationalities => {

   return(
   <option key={nationality._id} value={nationality._id} style={{fontStyle:
                               'arial',fontWeight:'bold'}}>{nationality.name}</option>
   )
   })}

</Field>

我想要的是国籍下拉列表中有 4 个国籍，顺序如下：1) 中国，2) 俄罗斯，3) 美国，4) 德国

当我创建人物时，我插入俄罗斯作为人物的国籍。并且在编辑创建的打开通讯员表格的人时，应该出现在俄罗斯国籍中，而不是下拉列表中的第一个元素 "chinese"。

Answer 1

在您的 HTML 代码中

{
  this.props.listNationalities.map(** nationalities ** => {
    return (
      <option
        key={nationality._id}
        value={nationality._id}
        style={{
          fontStyle:'arial',
          fontWeight:'bold'
        }}
      >
      {nationality.name}
      </option>
  )})
}

在地图方法中而不是使用 'nationalities' 使用 'nationality'
对于问题 'while editing ....'，请检查您保存的值的大小写。

When editing dropdown of form I've got this issue: TypeError: Cannot read property 'name' of undefined

When editing dropdown of form I've got this issue: TypeError: Cannot read property 'name' of undefined

javascript

reactjs

redux

redux-form