Warum, wenn ich das Ergebnis von Fetch Api nicht korrekt handle, geht Fetch in Fehler. mit redux-thunk

Question

Ich bekomme Daten: [{name: "s"}] über fetch api. Die Abrufaktion läuft sehr gut. Aber ich habe die Daten in der Komponente App in dieser Zeile return <p key={index}>{item}</p> nicht richtig behandelt. Ich weiß, ich sollte {item} durch {item.name} ersetzen. Aber ich verstehe nicht, wenn ich {item} in der unkorrekten Weise verwende, warum die Fetch-Aktion in Fehler geht?

das ist mein Code. und das Protokoll Ergebnis ist [Object] und -------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'), 
); 

thx für Ihre Hilfe ~

Answer 1

Da Sie Ihre Aktion in Ihrem zweiten then sind Dispatching, das ist, wo der Fehler Blasen bis zu, wenn es schließlich Fehler all ganz unten in der Renderfunktion. Dann fängt das folgende catch es ein.

Denken Sie daran, wenn Sie eine Kette von Funktionen haben, wird der Fehler die ganze Kette hochspringen, bis etwas es fängt oder Ihre Benutzeroberfläche explodiert.