对具有键的元素反应唯一键错误

时间:2019-03-12 10:30:41

标签: reactjs key render

我正在React中渲染一个名为attributemodal的模式。
attributemodal的呈现方法如下:

public render() {
    const name = this.props.activeTag.name;
    function findindex(element: any) {
      return element.name == name;
    }
    const index = this.props.possibleTags.findIndex(findindex);
    let attributes = [{name: "", helptexts: [{helptext: ""}] }];
    let infoText;
    if (index != -1) {
      attributes = this.props.possibleTags[index].attributes;
      infoText = this.props.possibleTags[index].helptexts[0].helptext;
    }
    const attr = attributes.map((item, key) =>
      <div style={{border: "1px solid black", padding: "10px"}} key={`attribute${key}`}>
        <b>{item.name}: </b>
       <input type="text" name={item.name} className="form-control" defaultValue={this.props.activeTag.attributes.length > 0 ? this.props.activeTag.attributes[key].value : ""} data-key={key} data-id={index}  onChange={this.onAttributeUpdate.bind(this)}/>
       <br/>
        <div className="info-box alert">
          <div className="msg" style={{padding: "0px 20px 0px 10px"}}>
            <i className="fa fa-info" style={{marginRight: "8px"}}></i> {item.helptexts[0].helptext}
          </div>
        </div>
      </div>
    );
    return <Modal size="large" isOpen={this.props.isOpen}>
      <ModalHeader>{this.props.headerText + " " + this.props.activeTag.name}</ModalHeader>
      <ModalBody>
        <div className="info-box alert">
          <div className="msg" style={{padding: "0px 20px 0px 10px"}}>
            <i className="fa fa-info" style={{marginRight: "8px"}}></i> {infoText}
          </div>
        </div>
        {attr}
      </ModalBody>
      <ModalFooter>
        <Button onClick={this.props.startAction.bind(this)} className="btn-danger" disabled={this.state.isRunning}>{this.state.isRunning && <i className="fa fa-spinner fa-spin"></i>} {this.props.addText}</Button>
      </ModalFooter>
    </Modal>;
  }

但是它给了我这个错误: enter image description here

如您所见,我试图在key内的div中添加一个map
但这仍然给我这个错误!
它还表示我正在渲染tr,但不是

谁能解释为什么会这样?

这是我渲染attributemodal的地方:
这在我的主应用程序的render方法中。

<AttributeModal
   key={"attributemodal"}
   startAction={this.onUpdateAttribute.bind(this)}
   isOpen={this.state.configTagModalActive}
   headerText={t("header")}
   activeTag={this.state.activeTag}
   addText={t("close")}
   possibleTags={this.state.possibleTags} 
/>

0 个答案:

没有答案