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

Is it valid to check the component state in an event function?

本文关键字：状态 是否 有效 组件 事件 函数 检查      更新时间：2023-09-26

我正在使用react，并有一个具有listChanged函数的组件，在存储更改事件后调用:

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状态。这是工作，因为我有一个视觉提示绑定到该变量，我也确认了谷歌浏览器的React调试扩展(在我的组件的React选项卡)。

在响应事件的函数中检查变量是否合法?该函数威胁我的isLive状态为true，因为无论变量值如何，我的状态数据总是刷新。但是我从视觉上确认了这个变量被设置为false…

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

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

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

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

pause: function(e) {
    this.setState({ isLive: !this.state.isLive });
},
相关文章：