Question

我尝试在我的<option>函数中使用索引作为映射的render()元素的键，但是仍然无法正常工作。真奇怪，我在映射之前console.log(activity_type_options)只是为了检查是否正在将activity_type_options重新初始化为其他内容。但是数组不会改变。组件本身渲染了我看到的三遍。但这甚至不应该导致这种情况，对吧？

警告：数组或迭代器中的每个子代均应具有唯一的“键”道具。

内部渲染返回

 activity_type_options.map(activity => {
      return (
        <option key={activity} value={activity}>
          {activity}
        </option>
      )
    })

activity_type_options

[“ BLDNG”，“ EQUIP”，“ CNSER”，“ TRNSP”，“ SFDEV”，“ STREG”，“ EXPNS”，“ RLEST”]

class ActivityModal extends React.Component {
  componentDidMount() {
    const {handleClick} = this.props
    const promise = new Promise(res => {
      res(handleClick({target: {name: this.activity_type.name, value: this.activity_type.value}}))
    })
    promise.then(() => {
      handleClick({target: {name: this.activity.name, value: this.activity.value}})
    })
  }
  render() {
    const {
      showModal,
      toggle,
      activity_type_options,
      activity_options,
      selectedType,
      selectedActivity,
      handleClick,
      saveActivity
    } = this.props
    return (
      <div>
        <Modal
          style={{position: 'absolute', top: '100px', left: '50px'}}
          isOpen={showModal}
          toggle={() => toggle()}
          className={this.props.className}
        >
          <ModalHeader toggle={() => toggle()}>New Activity Line</ModalHeader>
          <ModalBody>
            <div className='form-select'>
              <strong style={{fontSize: '14px'}}>Activity Type</strong>
              <select
                ref={element => (this.activity_type = element)}
                style={{fontWeight: '900', fontSize: '12px'}}
                id='activity_type'
                onChange={e => handleClick(e)}
                className='no-radius'
                name='selectedType'
              >
                {activity_type_options.map((activity, index) => {
                  return (
                    <option key={index} value={activity}>
                      {activity}
                    </option>
                  )
                })}
              </select>
              <strong style={{fontSize: '14px'}}>Activity</strong>
              <select
                ref={element => (this.activity = element)}
                style={{fontWeight: '900', fontSize: '12px'}}
                id='activity'
                onChange={e => handleClick(e)}
                className='no-radius'
                name='selectedActivity'
              >
                {activity_options
                  .filter(option => selectedType === option.activityRefName)
                  .map(activity => {
                    return <option value={activity.activityTypeName}>{activity.activityTypeName}</option>
                  })}
              </select>
              <strong style={{fontSize: '14px'}}>Activity Desc</strong>
              <input value={selectedActivity} disabled />
              <strong style={{fontSize: '14px'}}>Activity Name</strong>
              <input disabled value={selectedActivity} />
            </div>
          </ModalBody>
          <ModalFooter>
            <Button color='secondary' onClick={() => toggle()}>
              Cancel
            </Button>{' '}
            <Button color='primary' onClick={saveActivity}>
              OK
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    )
  }
}

export default ActivityModal

Answer 1

您的组件有2个地图，第二个未使用key道具。然后，您应该更改它：

{activity_options.filter(option => selectedType === option.activityRefName)
              .map(activity => {
                return <option key={activity.activityTypeName} value={activity.activityTypeName}>{activity.activityTypeName}</option>
              })}

Answer 2

问题似乎出在您的第二个<select>中，其中<option>元素未使用key道具进行渲染。

尝试修改代码，以使数组项（as passed via the second map callback parameter）的索引用于第二个选择中的key选项，就像第一个选择一样：

<select ref={element => (this.activity = element)}
        style={{fontWeight: '900', fontSize: '12px'}}
        id='activity'
        onChange={e => handleClick(e)}
        className='no-radius'
        name='selectedActivity'> {

    activity_options
    .filter(option => selectedType === option.activityRefName)
    .map((activity, index) => (

        <option key={index} 
                value={activity.activityTypeName}> { activity.activityTypeName }
        </option> 
    ))
}              
</select>

索引不是唯一的键

2 个答案: