_.map为每个元素渲染n次

Question

我想通过_.map在我的投资组合网站上展示4个项目。我将名称，位置，开始日期，结束日期等保留在JSON对象中，并通过state访问它。我想到有n个按钮（其中n = 4，我有多个项目），每个模态都有相应的名称，日期等等。

template(x) {
    console.log(x) # This is mapped properly - each individual project name is rendered
    <div key={x.id}>
        <Button className="modal-button" bsStyle="primary" bsSize="large" onClick={this.openModal.bind(this)}>{x.name}</Button>
        <Modal show={this.state.open} onHide={this.closeModal.bind(this)}>
            <Modal.Body>
                # Right around here, all 4 modals (of each project) is showing up...I'm getting 4 different modals for each button that I click?
                <h4>{x.name}</h4>
                <p>{x.description}</p>
            </Modal.Body>           
        </Modal>
    </div>
}

render() {
    return (
        <div className="container-fluid">
            <div className="row">
                {_(this.props.data.work).map((x) => this.template(x))}
            </div>
        </div>
    )
}

为什么会这样？