为什么thunk-redux将对象变成字符串

Question

我遇到了一个奇怪的问题， thunk-redux 。我正在编写 React-Redux 应用程序，该应用调用公共API，并在表中显示数据。但是，当我合并 thunk Middleware 处理异步API调用时，在将操作派遣到还原器后，我的数据会被串制。

index.js（Action Creator）

export const FETCHING_DATA = 'FETCHING_DATA';
export const FETCH_SUCCESS = 'FETCH_SUCCESS';
export const ERROR = 'ERROR';
export const getData = () => {
    return {
        type : FETCHING_DATA
    }
}
export const getDataSuccess = (data) => {
    return {
        type : FETCH_SUCCESS,
        payload: data
    }
}
export const getDataFailure = () => {
    return {
        type : ERROR
    }
}
export function searchCVE(cve){
    
    const url = `${CVE_URL}api/cve/${cve}`;
    return dispatch => {
        dispatch(getData());
        fetch(PROXY + url)
        .then(blob => blob.json())
        .then(data => {
            console.log('Request: ', data);
            dispatch(getDataSuccess(data))
        })
        .catch(e => {
            console.log(e);
            dispatch(getDataFailure(e.message))
        });
    }
}

data_reducer.js（reducer）

import {FETCHING_DATA ,FETCH_SUCCESS, ERROR } from '../actions/index.js';
const initialState = {
    payload:[],
    fetching: false,
    error: false
}
export default function(state=initialState, action){
    console.log('Got CVE: ', action);
    switch (action.type){
        case FETCHING_DATA: return {payload:[], fetching: true, ...state}
        case FETCH_SUCCESS: return [action.payload, ...state]
        case ERROR: return {payload:[], error: true, ...state}
             
    }
    return state;
}

正如您在 index.js Action Creator中看到的那样，console.log('Request: ', data);显示了我想要的JSON对象。但是，当我在表组件中{console.log('TEST: ' + this.props.cve)}时，控制台显示：

测试：[对象对象]

在我的应用程序中，我没有"串联"我的数据 - 为什么/为什么/在哪里可以将数据转换为字符串？我感谢社区可以提供的任何见解。

Answer 1

在我的应用程序中，我没有"串联"我的数据 - 为什么/thunk -redux在哪里可以将我的数据转换为字符串？

redux-thunk在任何情况下都无法做到。这很简单；它要做的就是以不同的方式处理功能动作。

问题是该对象是由您串制的，+加法操作员将对象胁迫到字符串：

{console.log('TEST: ' + this.props.cve)}

如果预计将在控制台中显示对象，则应为：

{console.log('TEST: ', this.props.cve)}

或可以在DOM中显示：

<pre>{JSON.stringify(this.props.cve, null, 2)}</pre>