奇怪的Reactjs setState行爲

我對Reactjs的setState函數有一個很奇怪的問題。它似乎希望我以非常特定的方式構建我的代碼塊，否則它將無法工作。我不知道爲什麼這會導致問題，因爲兩個結構對我來說看起來都一樣，但表現方式不同。奇怪的Reactjs setState行爲

我使用Browserify和Babelify來transpile和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方法停止工作（不會導致錯誤，它只是不更新狀態）

我無法弄清楚爲什麼這些不能以同樣的方式工作...爲了格式化的目的，我希望它們都具有相同的風格，但似乎只有在任何一種風格下格式化它們才能工作。

來源

2015-10-16 Tjalling Tolle

因此，當我們的Array.prototype.push()行爲與我預期的不同時，它會返回數組長度並添加新元素see mdn documentation。

我在我的播放列表基本上重置從[]到1和ofcourse數字不具有的功能推...

我不知道爲什麼格式的其他風格做了預期功能的... babelified代碼好像它不應該工作（當我改變了另一個函數看起來是一樣的沒有工作）

來源

2015-10-17 11:02:43

我的猜測是previousState是undefined，並且您的問題不是由間距引起的。

正如react's component lifecycle doc規定，一個狀態是在特定的功能才能訪問：

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

所以，如果你在其他調用您的函數次，previousState將是未定義的。

來源

2015-10-16 14:29:22 wintvelt

，你可以在[文檔的setState在看（https://facebook.github.io/react /docs/component-api.html），你可以使用一個函數（或對象nextState）作爲參數對setState，這個功能被用「previousState」（或稱爲currentState），並有返回nextState。同樣，當格式化相同時，只有其中一個功能遇到問題，另一個會工作得很好，這告訴我應該正確使用它（否則兩者都不起作用），但其他地方存在問題。 –

你說得對。錯過了。另一個可能的問題：通過調用'previousState.playlist.push（）'我認爲你直接也更新previousState，反應不喜歡。這可能是問題嗎？ – wintvelt

Mhhh它可能是...但它** **工作時，我構建我的代碼，像這樣this.setState（（previousState）=> {playlist：previousState.playlist.push（video）}）;'我' m會嘗試從我的構建過程中刪除uglify步驟並調試包文件 –

奇怪的Reactjs setState行爲

回答

相關問題