首頁猿問 ReactJS中狀態數組的正確修改

ReactJS中狀態數組的正確修改

JavaScript React.JS

MMMHUHU 2019-06-26 15:40:51

ReactJS中狀態數組的正確修改我想在state數組，這是正確的方法嗎？this.state.arrayvar.push(newelement);this.setState({arrayvar:this.state.arrayvar});我擔心用push可能會惹麻煩-安全嗎？另一種方法是復制數組，以及setState看起來很浪費。

查看完整描述

3 回答

慕虎7371278

TA貢獻1802條經驗獲得超4個贊

這個反應文檔說：

把它當作是不可變的狀態。

你的push將直接改變狀態，這可能會導致容易出錯的代碼，即使之后您再次“重置”狀態。Fex，它可能導致一些生命周期方法，如componentDidUpdate不會觸發。

在以后的Reaction版本中推薦的方法是使用更新者在修改狀態以防止競爭條件時使用：

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]}))

與使用非標準狀態修改時可能面臨的錯誤相比，內存“浪費”不是一個問題。

更早版本的替代語法

你可以用concat為了獲得一個干凈的語法，因為它返回一個新數組：

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])})

在ES6中，可以使用擴展算子:

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]})

反對回復 2019-06-26

鴻蒙傳說

TA貢獻1865條經驗獲得超7個贊

最簡單的，如果你正在使用ES6.

initialArray = [1, 2, 3];newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

新數組將是[1,2,3,4]

更新您的狀態反應

this.setState({
         arrayvar:[...this.state.arrayvar, newelement]
       });

了解有關數組破壞的更多信息。

反對回復 2019-06-26

收到一只叮咚

TA貢獻1821條經驗獲得超5個贊

最簡單的方法ES6:

this.setState(prevState => ({
    array: [...prevState.array, newElement]}))

反對回復 2019-06-26

3 回答
0 關注
1965 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

ReactJS中狀態數組的正確修改

ReactJS中狀態數組的正確修改

3 回答

添加回答