单击时仅一次渲染一个组件

Question

我正在一个reactjs项目中，当单击按钮时，我只需要渲染一次组件。我可以单击鼠标以使组件工作，但是我只想在组件的生命周期中渲染一次，请参考下面的代码。

我有一个布尔变量，它是 editshowComponent ，我在触发onclick事件并使其EditIteration组件正常工作时将其设置为true。但我希望整个过程只发生一次。

import React, { Component } from "react";
import Linkify from "react-linkify";
import "./UserFeed.css";
import { Redirect } from "react-router-dom";
import TimeAgo from "react-timeago";
import EditIteration from "./../EditIteration/EditIteration";
import Modal from "react-modal";



const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)",
    width: "50%",
    height:"50%"
  }
};


class UserFeed extends Component {
  state = { show: false };

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false,
      showComponentedit: false
    };

    this.openModal = this.openModal.bind(this);

    this.EditIteration = this.EditIteration.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({ modalIsOpen: true });
    
    
  }

 
  closeModal() {
    this.setState({ modalIsOpen: false });
  }

  EditIteration(e) {
    this.setState({
      showComponentedit: true, // hear i am mkaing show componentedit true i want to know where should i make it false so that my component will render only once
     
      
      modalIsOpen: false
    });

    


    
  }

  render() {
    
    let userFeed = this.props.feedData.map(function(feedData, index) {
      return (
        <button
          className="medium-12 columns"
          onClick={e => this.props.showJira(e, feedData.iterationid)}
        >
          <div className="people-you-might-know">
            <div className="row add-people-section">
              <div className="small-12 medium-10 columns about-people">
                <div className="about-people-author">
                  <p className="author-name">
                    {/* <button>{this.props.name}</button> */}
                    <Linkify>{feedData.iterationname}</Linkify>
                    <br />

                    {/* <TimeAgo date={this.props.convertTime(feedData.created)} /> */}
                  </p>
                </div>
              </div>
              <div className="small-10 medium-2 columns add-friend">
                <div className="add-friend-action">
                  <button
                    ref={node => {
                      this.nodeFilter = node;
                    }}
                    className="button secondary small"
                    onClick={e =>
                      this.props.deleteFeed(e, feedData.iterationid)
                    }
                    data={feedData.iterationid}
                    value={index}
                  >
                    <i className="fa fa-user-times" aria-hidden="true" />
                    Delete
                  </button>
                 
                  <button
                    ref={node => {
                      this.nodeFilter = node;
                    }}
                    className="button secondary small"


                    onClick={this.EditIteration}

                    data={feedData.iterationid}
                    value={index}
                  >
                    
                    <i className="fa fa-user-times" aria-hidden="true" />
                    Edit
                  </button>
                  {this.state.showComponentedit ? (
                      <div>
                        <EditIteration />
                        <Redirect
                          to={{
                            pathname: "/EditIteration",
                            state: {
                              editdata: feedData.iterationid,
                              editstartdate: feedData.startdate,
                              editenddate: feedData.enddate,
                              editname: feedData.iterationname
                            }
                          }}
                        />
                    </div>
                   
                    
                   
                    ) : null}
                  
                  
                  {/* <Modal
                    isOpen={this.state.modalIsOpen}
                    
                    onRequestClose={this.closeModal}
                    style={customStyles}
                    contentLabel="Example Modal"
                  >
                    
                    <button onClick={this.closeModal}>close</button>
                    
                    <EditIteration iterationname={feedData.iterationname}></EditIteration>
    
                    </Modal> */}
                    
                    
                </div>
              </div>
            </div>
          </div>
        </button>
      );
    }, this);

    return <div>{userFeed}</div>;
  }
}

export default UserFeed;