Reactjs 组件未更新React/Redux

我正在我的应用程序上使用Redux。我有一个连接到redux的Items组件。它将道具传递给各个项目组件。我还有一个ItemEditModal组件来编辑各个组件。我面临的问题是，当我通过ItemEditModal编辑项目时，即使redux发生了更改，项目组件也不会更新。以下是我的代码的相关部分：

我的文件。。 这是要关注的操作：actionTypes.SET\u EDIT\u SELECTED\u项目

const reducer = (state=initialState, action) => {
    switch(action.type) {            
        case (actionTypes.SET_EDIT_SELECTED_ITEM):
            let set_edit_selected_item_arr = {...state};
            set_edit_selected_item_arr = set_edit_selected_item_arr.items.map(item => {
                if (item.id === action.editInfo.id ) {
                    item.color = action.editInfo.color;
                    item.size = action.editInfo.size;
                    item.quantity = action.editInfo.quantity;
                    return item;
                } else {
                    return item;
                }
            });            
            return {
                ...state,
                items: set_edit_selected_item_arr
            };
        default:
            return state; 
    }

}

我的项目组件

import Item from '../../components/Item';

import './Items.css';

class Items extends Component {

    render() {
        return (
            <table className="Items">
                <thead>
                    <tr className="Items__header">
                        <th className="item_col">{this.props.items.length} ITEMS</th>
                        <th className="size_col">SIZE</th>
                        <th className="qty_col">QTY</th>
                        <th className="price_col">PRICE</th>
                    </tr>                
                </thead>
                <tbody>
                    {this.props.items.map(item => {
                        return (<Item item={item} key={item.name} />);
                    })}                
                </tbody>

            </table>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.itemRedux.items
    }
}
export default connect(mapStateToProps)(Items);

从“../../components/Item”导入项目；
导入“/Items.css”；
类项扩展组件{
render（）{
返回(
{this.props.items.length}items
大小
数量
价格
{this.props.items.map（item=>{
返回（）；
})}                
)
}
}
常量mapStateToProps=（状态）=>{
返回{
项目：state.itemRedux.items
}
}
导出默认连接（MapStateTops）（项目）；

我的ItemEditModal组件

import './ItemEditModal.css';

class ItemEditModal extends Component {

    state = {
        id: this.props.itemRedux.selectedItem.id,
        size: this.props.itemRedux.selectedItem.size,
        color: this.props.itemRedux.selectedItem.color,
        quantity: this.props.itemRedux.selectedItem.quantity,
    }

    onUnselectItemFunc = () => {
        this.props.onSetSelectedItem(null);
        this.props.onSetEditItemMode(false);
    }

    onQuantityChange = (e) => {
        //validation required
        this.setState({quantity: e.target.value})
    }

    onSelectChange = (e) => {
        this.setState({size: e.target.value})
    }

    onColorChange = (newColor) => {
        this.setState({color: newColor})
    }

    onSubmitForm = (e) => {
        e.preventDefault();
        this.props.onSetEditSelectedItem(this.state);
        this.props.onSetEditItemMode(false);
    }

    render() {
        return (    
            <div className={"ItemEdit " + (this.props.itemRedux.editItemMode ? 'showModal': '')}>
                <div className="ItemEdit__close">
                    <span onClick={this.onUnselectItemFunc}>x</span>
                </div>
                <div className="ItemEdit__container">
                    <div className="ItemEdit__info">
                        <h4>{this.props.itemRedux.selectedItem.name}</h4>
                        <h2>$ {this.props.itemRedux.selectedItem.price}</h2>
                        <p className="ItemEdit__styleNum">{this.props.itemRedux.selectedItem.styleNum}</p>
                        <p className="ItemEdit__control-color">
                            <span 
                                className="ItemEdit__control-color--red" 
                                onClick={()=> {this.onColorChange('red')}}>                                
                            </span> 
                            <span 
                                className="ItemEdit__control-color--green" 
                                onClick={()=> {this.onColorChange('green')}}>
                            </span> 
                            <span 
                                className="ItemEdit__control-color--blue" 
                                onClick={()=> {this.onColorChange('blue')}}>
                            </span>
                        </p>
                        <p>Color: {this.state.color}</p>
                        <form onSubmit={this.onSubmitForm}>
                            <select onChange={this.onSelectChange}>
                                <option value="S">small</option>
                                <option value="M">medium</option>
                                <option value="L">large</option>
                            </select>
                            <input 
                                type="number" 
                                maxLength="2" 
                                defaultValue={this.props.itemRedux.selectedItem.quantity}
                                onChange={this.onQuantityChange}    
                            /><br/>
                            <button className="btn btn-primary">EDIT</button>
                        </form>
                        <a href="#">Check product details</a>
                    </div>
                    <div className="ItemEdit__img">
                        <img src={this.props.itemRedux.selectedItem.imgUrl} alt="shirt pic" />
                    </div>

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

const mapStateToProps = (state) => {
    return {
        itemRedux: state.itemRedux
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSetSelectedItem: (bool) => dispatch(actions.setSelectedItem(bool)),
        onSetEditItemMode: (bool) => dispatch(actions.setEditItemMode(bool)),
        onSetEditSelectedItem: (itemInfo) => dispatch(actions.setEditSelectedItem(itemInfo))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ItemEditModal);

import./ItemEditModal.css'；
类ItemEditModal扩展组件{
状态={
id:this.props.itemRedux.selectedItem.id，
大小：this.props.itemRedux.selectedItem.size，
颜色：this.props.itemRedux.selectedItem.color，
数量：this.props.itemRedux.selectedItem.quantity，
}
onOnSelectItemFunc=（）=>{
this.props.onSetSelectedItem（null）；
this.props.onSetEditItemMode（false）；
}
onQuantityChange=（e）=>{
//需要验证
this.setState（{quantity:e.target.value}）
}
onSelectChange=（e）=>{
this.setState（{size:e.target.value}）
}
onColorChange=（新颜色）=>{
this.setState（{color:newColor}）
}
onSubmitForm=（e）=>{
e、 预防默认值（）；
this.props.onSetEditSelectedItem（this.state）；
this.props.onSetEditItemMode（false）；
}
render（）{
报税表（
x
{this.props.itemRedux.selectedItem.name}
${this.props.itemRedux.selectedItem.price}
{this.props.itemRedux.selectedItem.styleNum}

{this.onColorChange（'red'）}>
{this.onColorChange（'green'）}>
{this.onColorChange（'blue'）}>

颜色：{this.state.Color}

小的
中等的
大的


编辑
);
}
}
常量mapStateToProps=（状态）=>{
返回{
itemRedux:state.itemRedux
}
}
const mapDispatchToProps=（调度）=>{
返回{
onSetSelectedItem：（bool）=>dispatch（actions.setSelectedItem（bool）），
onSetEditItemMode：（bool）=>dispatch（actions.setEditItemMode（bool）），
onSetEditSelectedItem：（itemInfo）=>dispatch（actions.setEditSelectedItem（itemInfo））
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（ItemEditModal）；

也许我没看到什么。提前感谢。

当我发送动作时，不会发生任何事情 有时，您试图调度一个操作，但视图不会更新。为什么会发生这种情况？这可能有几个原因

永远不要改变参数 很容易修改Redux传递给您的状态或操作。别这样

Redux假设您从未在reducer中更改它提供给您的对象。每次都必须返回新的状态对象。即使你不使用像Immutable这样的库，你也需要完全避免变异

---

来源：

请只提供相关代码来说明问题，而不是粘贴整个文件的代码。好的，我将把它缩减到相关部分。我想我找到了答案。无论如何谢谢你，你可以删除这篇文章。