当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会看到新状态（对象引用）等于旧状态，并决定不进行重新渲染，因为似乎没有任何变化