为什么 Thunk-Redux 将对象变成字符串？答案

【问题标题】：Why is Thunk-Redux turning an object into a string?为什么 Thunk-Redux 将对象变成字符串？
【发布时间】：2019-02-17 02:35:40
【问题描述】：

我遇到了一个关于 thunk-redux 的奇怪问题。我正在编写一个调用公共 API 并在表格中显示数据的 React-Redux 应用程序。但是，当我合并 thunk 中间件 来处理异步 API 调用时，我的数据在操作被分派到 reducer 后被字符串化。

index.js（动作创建者）

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（减速器）

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 动作创建器中看到的，console.log('Request: ', data); 显示了我想要的 JSON 对象。但是，当我在表格组件中{console.log('TEST: ' + this.props.cve)} 时，控制台显示：

测试：[对象对象]

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

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

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

redux-thunk 在任何情况下都做不到。这是deadly simple；它所做的只是以不同的方式处理函数动作。

问题是你正在对对象进行字符串化，+ 加法运算符将对象强制为字符串：

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

如果希望在控制台中显示一个对象，它应该是：

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

或者可以在DOM中显示：

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

【讨论】：

感谢您的澄清！这应该是公认的答案——我的烦恼都消失了。