奇怪的 Reactjs setState 行为

Question

我在使用 Reactjs 的 setState 函数时遇到了一个非常奇怪的问题。它似乎希望我以一种非常具体的方式构建我的代码片段，否则它不会工作。我不知道为什么这会导致问题，因为这两个结构对我来说看起来一样，但行为方式不同。

我正在使用 Browserify 和 Babelify 进行转译，并使用 gulp-uglify 来缩小我的代码。可能是这些构建步骤中的一个或多个导致了问题，但我不知道是哪个（因此我也不知道是否以及在何处提交问题）

这是我的代码的相关部分：

export default class VideoAppScreen extends React.Component {
    constructor( props ) {
        super( props );
        this.state = { 
            playing: 0,
            playlist: []
        };
    }

    addVideo( video ) {
        this.setState( ( previousState ) => {
            return {playlist: previousState.playlist.push( video )};
        });
    }

    onEnd( event ) {
        console.log( "onEnd", event, this.state );
        this.setState( ( previousState ) => {
            return {playing: previousState.playing + 1};
        });
    }   

    render() {
        // stuff
    }
}

如您所见，setState 块的格式如下：

this.setState( ( previousState ) => {
    return {item: value};
});

像这样，addVideo 方法会导致错误：Uncaught TypeError: t.playlist.push is not a function。

如果我把方块改成这样：

this.setState( ( previousState ) => {item: value} );

addVideo 方法有效，但 onEnd 方法停止工作（不会导致错误，它只是不更新状态）

我不明白为什么它们的工作方式不同...出于格式化目的，我希望它们都具有相同的样式，但似乎它们只有在以任一样式格式化时才有效。

Answer 1

我的猜测是 previousState 是 undefined，并且您的问题不是由间距引起的。

如 react's component lifecycle doc 中所指定，之前的状态只能在特定函数中访问：

shouldComponentUpdate(nextProps, nextState),
componentWillUpdate(nextProps, nextState) 和
componentDidUpdate(prevProps, prevState)

因此，如果您在其他时间调用您的函数，previousState 将是未定义的。

Answer 2

因此，当我们的 Array.prototype.push() 行为与我预期的不同时，它 returns 添加了新元素的数组的长度 see mdn documentation。

我基本上是将播放列表从 [] 重置为 1，当然数字没有推送功能...

我不知道为什么其他格式的格式会按预期运行...babelified 代码似乎不应该工作（当我更改另一个功能看起来相同时没有工作）

奇怪的 Reactjs setState 行为

Strange Reactjs setState behaviour

javascript

browserify

reactjs

gulp-uglify

babeljs