Почему, если я не правильно обрабатываю результат из apetch api, тогда выбор происходит в ошибке. using redux-thunk

Question

Я получаю данные: [{name: "s"}] через выборку api. Действие выборки идет очень хорошо. Но я неправильно обрабатывал данные в компоненте App в этой строке return <p key={index}>{item}</p>. Я знаю, что я должен заменить {item} на {item.name}. Но я не понимаю, использую ли я {item} в некорректном порядке, почему действие выборки переходит в ошибку?

это мой код. и результат журнала [Object] и -------error-----

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'), 
); 

ТНХ за помощь ~

Answer 1

Поскольку вы диспетчерская свое действие внутри второго then, что там ошибка пузыри до, когда он в конечном итоге ошибки все вниз в вашей функции рендеринга. Затем поймает следующее: catch.

Помните, что когда у вас есть цепь функций, ошибка будет пузыриться до цепи, пока что-то не поймает ее или ваш UI не взорвется.