javascript - 在事件函数中检查组件状态是否有效？

Question

我正在使用 React 并有一个带有 listChanged 函数的组件，在 Store 更改事件后调用:

getInitialState: function () {
    return {
        isLive: true,
        data: [],
    };
},

componentDidMount: function() {  
    MyStore.addChangeListener(this.listChanged);
},

listChanged: function() {
    if (this.state.isLive) {
        var data = MyStore.getData();
        var newState = {
            data: data
        };

        this.setState(newState);
    }
},

pause: function(e) {
    this.state.isLive = !this.state.isLive;
},

我有一个按钮，可以通过调用 pause 函数来切换 isLive 状态。这是有效的，因为我有一个绑定(bind)到该变量的视觉提示，并且我还使用 Google Chrome 的 React 调试扩展进行了确认(在我的组件的 React 选项卡中)。

在响应事件的此类函数中检查该变量是否合法？该函数威胁我的 isLive 状态为 true，因为无论变量值如何，我的状态数据总是会刷新。但我目视确认该变量设置为 false...

TLDR:即使 this.state.isLive 变量设置为 false，this.setState(newState); 仍然在 listChanged 函数中调用。

Answer 1

是的，这是完全有效的。然而，这不是:

pause: function(e) {
    this.state.isLive = !this.state.isLive;
},

您不能以这种方式设置状态值。您必须使用setState:

pause: function(e) {
    this.setState({ isLive: !this.state.isLive });
},