Javascript 为什么如果我没有正确处理fetchapi的结果，那么fetch就会出错呢。使用redux-thunk

我得到数据：

[{name:“s”}]

通过fetchapi。获取操作进行得非常顺利。但是我没有正确处理组件应用程序中这一行的数据

return
{item}

。我知道我应该用

{item.name}

替换

{item}

。但是我不明白如果我以不正确的方式使用

{item}

，为什么fetch操作会出错

这是我的密码。日志结果是

[Object]

和

----错误---

import React from 'react';
import { render } from 'react-dom';
import { createStore, applyMiddleware} from "redux";
import { Provider, connect } from 'react-redux';
import thunkMiddleware from 'redux-thunk';

const actions = {
    search: params => (dispatch) => {
        dispatch(actions.beginSearch());
        fetch("http://127.0.0.1:8000/search",{
            method: 'POST',
            data:  {},
            credentials: true,
        }).then((res) => {
            return res.json()
        }).then((res) => {
            console.log(res.data)//res.data = [{name: "s"}];
            dispatch(actions.doneSearch(res.data));
        }).catch(() => {
            console.log('-------error-----');
            // dispatch(actions.failSearch("error"));
        });
    },
    beginSearch: () => ({
        type: 'BEGIN_SEARCH',
    }),
    doneSearch: data => ({
        type: 'DONE_SEARCH',
        payload: data,
    }),
    failSearch: err => ({
        type: 'FAIL_SEARCH',
        payload: err,
    }),
}

class App extends React.Component {
    render() {
        const {dispatch, listdata} = this.props;
        return (
            <div>
                {
                    listdata.map((item,index) => {
                        return <p key={index}>{item}</p>
                    })
                }
                <button onClick={()=>{
                    dispatch(actions.search())
                }}>click to get data...</button>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        listdata: state,
    };
}

const Container = connect(mapStateToProps)(App);
const reducers = (state=[], action) => {
    switch (action.type) {
        case "DONE_SEARCH":
            return [...action.payload]
        default:
            return state;
    }

}
const store = createStore(reducers, applyMiddleware(thunkMiddleware) );

render(
    <Provider store={store}>
        <Container />
    </Provider>,
    document.getElementById('container'),
);

从“React”导入React；
从'react dom'导入{render}；
从“redux”导入{createStore，applyMiddleware}；
从'react redux'导入{Provider，connect}；
从“redux thunk”导入thunk中间件；
常量动作={
搜索：params=>（分派）=>{
分派（actions.beginSearch（））；
取回（“http://127.0.0.1:8000/search",{
方法：“POST”，
数据：{}，
证书：正确，
})。然后（（res）=>{
return res.json（）
})。然后（（res）=>{
console.log（res.data）//res.data=[{name:“s”}]；
调度（actions.doneSearch（res.data））；
}).catch（（）=>{
console.log（'----错误---'）；
//调度（操作失败搜索（“错误”）；
});
},
beginSearch:（）=>({
键入：“开始搜索”，
}),
doneSearch:data=>({
键入：“完成搜索”，
有效载荷：数据，
}),
失败搜索：错误=>({
键入：“搜索失败”，
有效载荷：呃，
}),
}
类应用程序扩展了React.Component{
render（）{
const{dispatch，listdata}=this.props；
返回(
{
listdata.map（（项目，索引）=>{
return
{item}
})
}
{
分派（actions.search（））
}}>单击以获取数据。。。
);
}
}
常量mapStateToProps=（状态）=>{
返回{
listdata:state，
};
}
const Container=connect（mapStateToProps）（应用程序）；
常量还原器=（状态=[]，操作）=>{
开关（动作类型）{
案例“已完成搜索”：
返回[…操作.有效负载]
违约：
返回状态；
}
}
const store=createStore（reducer、applyMiddleware（thunk中间件））；
渲染(
,
document.getElementById（'container'），
);

---

谢谢你的帮助~

因为你是在第二个

中调度你的动作，然后
，这就是错误冒泡的地方，当它最终在你的渲染函数中出错时。然后下面的
catch
捕获它

记住，当你有一个函数链时，错误会一直冒泡，直到有东西抓住它或者你的UI爆炸
 谢谢你的回答。但我不能很好地理解它。是否有任何标准文件可供参考？