0

我对 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 方法停止工作（不会导致错误，它只是不更新​​状态）

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

4

2 回答 2

0

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

正如react 的组件生命周期文档中所指定的，之前的状态只能在特定的函数中访问：

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

所以如果你在其他时间调用你的函数，previousState将是未定义的。

于 2015-10-16T14:29:22.270 回答
0

因此，当它使我们的Array.prototype.push()行为与我预期的不同时，它会返回添加了新元素的数组的长度，请参阅 mdn 文档。

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

我不知道为什么其他格式的格式确实按预期工作...... babelified 代码似乎不应该工作（并且当我将另一个函数更改为看起来相同时也不起作用）

于 2015-10-17T11:02:43.193 回答