单击复选框时，带有复选框的 React/Redux 组件不会更新

Question

在我的组件中，我有复选框。当我单击它们时，我希望将选中的复选框保存在 redux 状态并更新我的组件，因此选中的复选框应显示为选中状态。 所以这是我的组件：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {selectIngredient} from '../actions';
class Ingredient extends Component {
    constructor(props) {
        super(props)
        this.isSelected = this.isSelected.bind(this);
        this.handleCheckbox = this.handleCheckbox.bind(this);

    }


    handleCheckbox(e) {
        const value=e.target.value;
        this.props.selectIngredient(value);
    }


    isSelected(id) {
        return (this.props.selectedIngredients.indexOf(id) > -1)
     }

    render() {
        return (
            <div className="container">
                <div className="form-check checkbox">
                    <label className="form-check-label">
                        <input checked={this.isSelected(1)}
                               className="form-check-input"
                               onClick={this.handleCheckbox}
                               type="checkbox" value="1" />
                        1
                    </label>

                </div>
                <div className="form-check checkbox">
                    <label className="form-check-label">
                        <input checked={this.isSelected(2)}
                               className="form-check-input"
                               onClick={this.handleCheckbox}
                               type="checkbox" value="2" />
                        2
                    </label>

                </div>
                <div className="form-check checkbox">
                    <label className="form-check-label">
                        <input checked={this.isSelected(3)}
                               className="form-check-input"
                               onClick={this.handleCheckbox}
                               type="checkbox" value="3" />
                       3
                    </label>

                </div>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps){
    const {selectedIngredients} = state;
    return {selectedIngredients}

}

export default connect(mapStateToProps,{selectIngredient})(Ingredient);

这是 action/index.js

import {SELECT_INGREDIENT} from "../constants";

export function selectIngredient(selected){
    const action = {
        type: SELECT_INGREDIENT,
        selected
    }
    return action;
}

这里是减速器：

import {SELECT_INGREDIENT} from "../constants";

export default (state={selectedIngredients:[]}, action)=>{
    let stateBefore = Object.assign({},state);
    switch(action.type){
        case SELECT_INGREDIENT:
            const {selected} = action;
            stateBefore['selectedIngredients'].push(+selected);
            return stateBefore

        default:
            return state;
    }

} 

当我点击复选框时，没有任何变化，它们保持空白。组件未更新。但是 redux 更新了它的状态。 我想如果 redux 状态正在更新，那么组件及其复选框也应该更新。这是错的吗？

请帮我弄清楚如何完成这项工作。谢谢

---

下面的cmets给出的答案：

在你的减速器中返回 { ...state, selectedIngredients: [...state.selectedIngredients, action.selected] }

Answer 1

这是一个突变：

  let stateBefore = Object.assign({},state);
  ...
      stateBefore['selectedIngredients'].push(+selected);

你只是浅层地复制了 state 对象，但你仍然改变了 selectedIngredients 因为它是通过引用复制的所以你仍然 修改现有的 selectedIngredients 对象。

查看以下问题https://github.com/reactjs/redux/issues/1769的第一个答案

使用对象扩展运算符：

case SELECT_INGREDIENT:
  return {
    ...state, 
    selectedIngredients: [...state.selectedIngredients, action.selected],
  }