TypeError：无法读取未定义的属性“操作”（React-Redux）

Question

所以，我正在使用 React 中的 Redux，并且我想在用户完成移动或调整组件大小后更新我的组件，但我得到该属性“操作”未定义。我可能会说他进入了函数 updatePortletLocation 和 consol.log 我传递的 obj1 ，所以他进入了函数而不是动作。有人可以帮帮我吗？

这些是代码中最重要的部分：

1. App.js：

class App extends Component {

    constructor(props){
      super(props);
    }

    updatePortletLocation(layout, child, newItem){
        var res = newItem.i;
        var res1 = res.split(" ");
        var obj = '[{"portletlocationid":' + Number(res1[0]) + ', "portletid":' +  Number(res1[1]) + ', "dashboardid":' + Number(res1[2]) + ', "width":' +  Number(newItem.w) + ', "height":' + Number(newItem.h) + ', "column":' + Number(newItem.y) + ', "row":' + Number(newItem.x) + '}]';
        var obj1 = JSON.parse(obj);     
        console.log(obj1);
        this.props.actions.updatePortletLocation(obj1);
    }

 /* Render part of the code:  */

  return (
            <ul>
                <ReactGridLayout className="layout" layout="fit" cols={12} rowHeight={30} width={1200} onDragStop={this.updatePortletLocation} 
                     onResizeStop={this.updatePortletLocation} >
                    {this.props.portletlocations.map((portletlocation) => (
                        <div 
                            key={portletlocation.id + " " + portletlocation.portlet.id + " " + portletlocation.dashboard.id} 
                            data-grid={{ x: portletlocation.column, 
                                         y: portletlocation.row, 
                                         w: portletlocation.width, 
                                         h: portletlocation.height}} 
                         >
                            {portletlocation.portlet.title}
                            {portletlocation.portlet.description}
                         </div>

                    ))}
                </ReactGridLayout>
            </ul>
        );

 /* Map dispatch to props: */

 const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(portletLocationsAction, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (App)

1. 行动：

export function updatePortletLocation(portletlocation){
    return(dispatch) => {
        fetch('http://localhost:8080/portletlocation/update', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body:JSON.stringify({
                "portlet": {
                    "portletId": portletlocation[0].id,
                    "id": portletlocation[0].portletid 
                },
                "dashboard":{
                    "dashboardId": portletlocation[0].dashboardid,
                    "id": portletlocation[0].dashboardid
                },
                "portletLocationId": portletlocation[0].portletlocationid,
                "id": portletlocation[0].portletlocationid,
                "column": portletlocation[0].column,
                "row":  portletlocation[0].row,
                "height": portletlocation[0].height,
                "width": portletlocation[0].width 
            })
        }).then(responsePortletLocation => {
            console.log("Successfully updated portlet location!");
            dispatch(updatePortletLocationSuccess(responsePortletLocation));
        }).catch(error => {
            throw(error);
        })
    }
}

Answer 1

而不是this.props.actions.updatePortletLocation(obj1);，
试试this.props.updatePortletLocation(obj1);。

---

关于mapDispatchToProps：

如果传递了一个对象，则假定其中的每个函数都是 Redux 动作创建者。具有相同函数名称但每个动作创建者都包装在调度调用中以便可以直接调用它们的对象将被合并到组件的道具中。

source