当 redux 中的状态更改时，反应无法重新渲染

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)

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

感谢您的帮助。

Answer 1

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

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

这是因为 React 将看到与旧状态相同的新状态（对象引用），并决定不重新渲染，因为看起来什么都没有改变

当 redux 中的状态更改时，反应无法重新渲染

react cannot re-render when state change in redux

javascript

reactjs

redux

react-redux