javascript - 当 redux 状态改变时，react 无法重新渲染

Question

我是 React 和 Redux 的初学者。我想制作待办事项列表应用程序。但是当我将列表插入商店时，displayList() 函数不会重新渲染。我该如何解决这个问题。

这是我的 reducer 代码。

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，而是返回[ ... state, action.payload.item ]

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

这是因为 React 会看到新状态(对象引用)等于旧状态，并决定不重新渲染，因为看起来什么都没有改变