javascript - React.js - componentWillReceiveProps 仅每隔 this.props 更新一次

Question

我正在使用 React v0.14.6 构建一个应用程序。所需的功能是单击 GoalItem 以显示 ModalItem。目标项有一个 'a' 标签，其属性 onClick 设置 {this.state.showModal: true}。 ModalItem 通过 showModal 属性传递给 GoalItem 的 this.state.showModal。

要更改 ModalItem 组件的状态，使 this.state.showModal: this.props.showModal，我在 componentWillReceiveProps 中使用了 setState()。

奇怪的是，GoalItem 中的 'a' 标签需要点击两次才能显示模态框。目标是点击一次就足够了。

预先感谢您的帮助。下面是相关代码。

//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 中，您将获得新的 Prop 作为参数。所以应该是:

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

基本上，这是一个您可以通过使用 this.props 访问它们来比较来自参数的新 Prop 与旧 Prop 的地方，然后执行所需的状态更新。

参见文档:componentWillReceiveProps