javascript - 索引对于键不是唯一的

Question

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

警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。

内部渲染返回

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

活动类型选项

[“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

标签： javascriptreactjs

Answer 1

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

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