我遇到了一个与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(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动作创建器中看到的那样,console.log('Request: ', data);
显示了我想要的JSON对象。但是,当我在表组件中使用{console.log('TEST: ' + this.props.cve)}
时,控制台显示:
测试:[对象]
在我的应用程序中没有任何一点我“字符串化”我的数据 - 为什么/ thunk-redux将我的数据转换为字符串?我感谢社区提供的任何见解。
在我的应用程序中没有任何一点我“字符串化”我的数据 - 为什么/ 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>