當redux中的狀態更改時，react無法重新渲染

Question

我是React＆Redux的入門者。 我想做todolist應用。 但是當我將列表插入商店時，displayList（）函數不會重新呈現。 我怎樣才能解決這個問題。

這是我的減速器代碼。

 export default function(state = ['start1','start2'], actions) { switch(actions.type) { case 'APPEND_ITEM': state.push(actions.payload.item) return state break } 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 { displayList(){ return this.props.dispatchs.map((item) => { return( <li key={ Math.random() }>{item}</li> ) }) } render(){ return( <div> { this.displayList() } </div> ) } } var mapStateToProps = (state) => { return { dispatchs: state.dispatch } } export default connect(mapStateToProps)(TodoList) 

2,3針未在屏幕上重新呈現

謝謝你的幫助。

Answer 1

而不是在reducer中使用push，而是返回[... state，action.payload.item]

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

這是因為React會看到新狀態（對象引用）等於舊狀態，並決定不進行重新渲染，因為似乎沒有任何變化