React.js - componentWillReceiveProps обновляет только все обновления this.props

Question

Я создаю приложение с React v0.14.6. Желаемая функциональность - щелкнуть по GoalItem, чтобы показать ModalItem. Элемент цели имеет тег 'a' с атрибутом onClick, который устанавливает {this.state.showModal: true}. ModalItem передается с помощью this.state.showModal GoalItem с помощью атрибута showModal.

Чтобы изменить состояние компонента ModalItem таким образом, чтобы this.state.showModal: this.props.showModal, я использую setState() в компонентеWillReceiveProps.

Странное поведение заключается в том, что тег 'a' в GoalItem нужно дважды щелкнуть, чтобы сделать модальным. Цель - всего один щелчок.

Заранее благодарю вас за помощь. Ниже приведен соответствующий код.

//goal-item.jsx 

var React = require('react'); 
var ModalItem = require('./modal-item'); 

module.exports = React.createClass({ 
    getInitialState() { 
     return { 
      name: this.props.goal.name, 
      nameChanged: false, 
      showModal: false 
     } 
    }, 
    open() { 
     this.setState({ showModal: true }); 
    }, 
    render() { 
     return <a className="list-group-item" 
        key={this.props.goal.id} 
        onClick={this.open}> 
      <ModalItem goal={this.props.goal} showModal={this.state.showModal} /> 
     </a> 
    } 
}); 

//modal-item.jsx 

var React = require('react'); 
var Modal = require('react-bootstrap/lib/modal'); 
var Button = require('react-bootstrap/lib/button'); 
module.exports = React.createClass({ 
    getInitialState() { 
     return {showModal: false }; 
    }, 
    componentWillReceiveProps() { 
     this.setState({ showModal: this.props.showModal }); 
    }, 
    close() { 
     this.setState({ showModal: false }); 
    }, 
    render() { 
     return (
      <div> 
       <Modal show={this.state.showModal} onHide={this.close}> 
        <Modal.Header closeButton> 
         <Modal.Title>{this.props.goal.name}</Modal.Title> 
        </Modal.Header> 
        <Modal.Body> 
         <p>{this.props.goal.description}</p> 
        </Modal.Body> 
        <Modal.Footer> 
         <Button onClick={this.close}>Close</Button> 
        </Modal.Footer> 
       </Modal> 
      </div> 
     ); 
    } 
}); 

Answer 1

В componentWillReceiveProps вы получите новый реквизит в качестве аргумента. Так оно и должно быть:

componentWillReceiveProps(newProps) { 
    this.setState({ showModal: newProps.showModal }); 
} 

В основном это место, где вы можете сравнить новые подпорки от аргумента со старой опорой путем доступа к ним с помощью this.props, а затем выполнить необходимые обновления состояния.

См. Документацию: componentWillReceiveProps