反應無法重新呈現時，在狀態更改在減少

我首發於反應&減少。我想製作todolist應用程序。但是當我將一個列表插入商店時，displayList（）函數不會被重新渲染。我怎樣才能解決這個問題。反應無法重新呈現時，在狀態更改在減少

這是我的減速器代碼。

export default function(state = ['start1','start2'], actions) { 
 
\t switch(actions.type) { 
 
\t \t case 'APPEND_ITEM': 
 
\t \t \t state.push(actions.payload.item) 
 
\t \t \t return state 
 
\t \t \t break 
 
\t } 
 
\t return state 
 
}

，這是我todolist.js代碼。

import {bindActionCreators} from 'redux'; 
 
import {connect} from 'react-redux'; 
 
import ReactDOM from 'react-dom' 
 
import React from 'react' 
 

 
class TodoList extends React.Component { 
 
\t displayList(){ 
 
\t \t return this.props.dispatchs.map((item) => { 
 
\t \t \t return(
 
\t \t \t \t <li key={ Math.random() }>{item}</li> 
 
\t \t \t) 
 
\t \t }) 
 
\t } 
 
\t render(){ 
 
\t \t return(
 
\t \t \t <div> 
 
\t \t \t \t { this.displayList() } 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
} 
 

 
var mapStateToProps = (state) => { 
 
\t return { 
 
\t \t dispatchs: state.dispatch 
 
\t } 
 
} 
 

 
export default connect(mapStateToProps)(TodoList)

pin 2,3 does not re-render on the screen

謝謝你的幫助。

來源

2016-12-01 Chun Rapeepat

而不是在減速機使用推，回到[...狀態，action.payload.item]

case 'APPEND_ITEM': 
    return [ ...state, action.payload.item ]

這是因爲作出反應會看到新的狀態（對象引用）等於舊，並決定不重新渲染，因爲它看起來沒有任何變化

來源

2016-12-01 13:38:25 tomfa

它的工作原理！非常感謝你。 –

@ChunRapeepat如果你對spread操作符還不是很熟悉，那麼嘗試用'concat（）'替換'push（）'。請記住，Redux中沒有突變:) –

另請替換您的待辦事項列表項中的'Math.random（）'方法，並使用數組的索引。誰知道由於Math.random（）的「隨機性」，新的待辦事項是否獲得與另一個待辦事項相同的值？ –

反應無法重新呈現時，在狀態更改在減少

回答

相關問題