ReactJS - REDUX - 状态显示不更新

Question

我正在使用Redux构建一个应用程序，我遇到了这个问题：当我向其添加元素时，我的reducer的状态会更新，但显示保持不变。

这是我的组件的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { displayList } from '../actions';
import { bindActionCreators } from 'redux';

class ListDisplayer extends Component {
  constructor(props) {
    super(props);
  }
   render() {
     return (
           <div className="container">
            <form>
              <div className="field is-grouped">
                <div className="control">
                  <button className="button is-primary" 
                      onClick={(e) => {e.preventDefault();this.props.dispatch(displayList())}}>
                      Display
                  </button><br/>
                  List
                  {
                      this.props.list.map((item,index) => 
                            <p key={index}>{item}</p>
                        )
                    }
                </div>
              </div>
            </form>
            </div>
     )
   }
}

function mapStateToProps(state){
    return {
        list: state.displayReducer,
      };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(displayList, dispatch) }
}

export default connect(mapStateToProps)(ListDisplayer);

为了测试问题是否来自reducer，我用这种方式初始化它：

import * as actionType from '../actions/ActionType';

const displayReducer = (state = ['haha','haha','haha'], action) => {
  let newState;
  switch (action.type) {
    case actionType.DISPLAY_LIST:
        let newarr = state;
        newarr.push(action.payload);
        console.log(newarr);
      return newState = newarr;

    default:
      return state
  }
}

export default displayReducer;

当我启动应用程序时，我的组件中的地图正确完成，我看到：

但是，当我单击Display按钮并执行displayList（）函数（请参阅组件代码）时，如控制台中所示，reducer的状态会更新：

但是，屏幕上仍然只有三个“哈哈”，这意味着我的mapStateToProps无法正常工作，或者我没有在reducer中正确更新状态。我已经在这个网站和GitHub上看到了类似的错误，但没有一个解决方案适合我。

Answer 1

引用“Redux”文档

为什么我的组件没有重新渲染，或者我的mapStateToProps没有运行？直接意外地改变或修改您的状态是组件在调度操作后不重新渲染的最常见原因

欲了解更多信息，请访问website

所以基本上，以下代码片段

    let newarr = state;
    newarr.push(action.payload);
    console.log(newarr);

改变原始状态本身

为什么？因为

1）Array.push（）方法改变原始数组（并返回新数组的长度）

2）在Javascript中，当变量引用一个对象（包括数组）时，“value”是对该对象的引用。这意味着，无论何时执行newarr.push（newItem），如果你控制日志（状态），你都可以看到这一点，同样的项目也包括在国家本身。但事实并非如此。

为了防止意外突变，您应该执行以下操作，

let newarr = [...state, action.payload]

使用spread运算符，您可以使用state数组中的值，在逗号之后，还会引入一个新值，该值将作为新项添加。

多亏了这种方式，您不必使用newarr.push()方法并改变数组，而是创建一个新数组，复制旧状态的值并在此复制过程中引入新值

总而言之，您可以尝试更新代码吗？

const displayReducer = (state = ['haha','haha','haha'], action) => {
  let newState; // you don't need this, you can get delete this line
  switch (action.type) {
    case actionType.DISPLAY_LIST:
        return [...state, action.payload] // return a new array that copies the original state's values and introduces a new value during this process

    default:
      return state
  }
}

Answer 2

你的reducer必须是纯函数，所以不要在那里使用push方法。

    case actionType.DISPLAY_LIST:
     return [...state, ...action.payload]