Question

我的状态已更新，并希望将其映射到道具。

奇怪的是，我可以看到状态是一个列表（正常），但是，当映射到道具时，道具就成了代理。

以下代码显示了更新fitlist状态的reducer：

const initialState={
    fitslist:[]
}
const downloadFitsReq=(state=initialState,action)=>{
switch(action.type){
    case FITSSELECTED:
        console.log("fits selected");
        state={...state,fitslist:action.selectedRowKeys};
        console.log("selectedRowKeys: "+action.selectedRowKeys)
        console.log(state);
        return state
    default:
        return state
    }
}

现在我可以看到状态已更新并按预期显示列表：

{fitslist: Array(1)}
    fitslist:["1"]
    __proto__:Object

但是当我将状态映射到道具时，奇怪的事情发生在这里：

const QueryFormMSTP=(state)=>{
    return {
        fitsClicked: state.downloadFitsReq.fitslist,
        form:state.form,
    }
};
const QueryFormC=connect(QueryFormMSTP,QueryFormMDTP)(QueryForm);

现在fitsClicked成为代理。 console.log显示fitsClicked的以下信息：

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ,     isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}

我不明白为什么。任何人都可以帮助我，我花了一整天的时间研究这个问题。提前谢谢。

mapDispatchToProps功能如下：

function QueryFormMDTP(dispatch,ownProps){
    return {
        downloadFits:(fitsClicked)=>{
            console.log("download clicked");
            console.log(fitsClicked);
            var fitsparam={
                fitsdownloadparam:fitsClicked
            };
            console.log(fitsparam);
            axios.get('http://localhost:8080/work003-1.0/alma3/downloadFits',fitsparam)
                .then(function(fitsRes){
                    console.log(fitsRes);
                })
                .catch(e=>console.log(e))
        },
    }
};

如果我将console.log(fitsClicked)更改为console.log(ownProps.fitsClicked)，则会显示未定义。

道具在组件部分中声明如下：

QueryForm.propTypes={
    downloadFits:PropTypes.func,
    fitsClicked:PropTypes.array,
}

Answer 1

您可以在mapStateToProps或reducer中执行此操作

const downloadFitsReq=(state=initialState,action)=>{
switch(action.type){
    case FITSSELECTED:
        console.log("fits selected");
        state={...state,fitslist:action.selectedRowKeys||[]};    //Note
        console.log("selectedRowKeys: "+action.selectedRowKeys)
        console.log(state);
        return state
    default:
        return state
    }
}

或 QueryFormMSTP

const QueryFormMSTP=(state)=>{
    return {
        fitsClicked: state.downloadFitsReq.fitslist || [],//Note
        form:state.form,
    }
};
const QueryFormC=connect(QueryFormMSTP,QueryFormMDTP)(QueryForm);

为什么mapStateToProps将数组作为代理返回？

1 个答案: