反应无法重新呈现时，在状态更改在减少

我首发于反应&减少。我想制作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（）的“随机性”，新的待办事项是否获得与另一个待办事项相同的值？ –

反应无法重新呈现时，在状态更改在减少

回答

相关问题