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;
},

我有一个按钮，可以通过调用isLive函数来切换pause状态。这是有效的，因为我有一个绑定到该变量的视觉提示，我也确认了谷歌Chrome的React Debug Extension（在我的组件的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 });
},

检查事件函数中的组件状态是否有效？

1 个答案: