Redux Reducer: Ich bin nicht sicher, ob ich Artikel (neu oder alt) richtig gesetzt habe

Question

Ich erstelle eine Website für mein End-Term-Projekt in der Schule.

Bisher habe ich zwei Ansichten, die ich versuche zu rendern. Beide geben eine Sammlung von meinem Express/API-Endpunkt zurück. Der eine verhält sich richtig und der andere vollständig.

Ich glaube mein Problem ist die Art, wie ich einen neuen Status im Reducer erzeuge und weiß, wann eine dumme Komponente Zugriff auf Requisiten hat. Aber bevor wir dazu kommen, hier sind die Fehler.

Auf der nicht so Borky Seite:

invariant.js:42 Uncaught (in promise) Error: setState(...): takes an object of state variables to update or a function which returns an object of state variables.

Und

Warning: SingleCountry.state: must be set to an object or null

Auf der zweiten Seite:

Uncaught (in promise) Error: setState(...): takes an object of state variables to update or a function which returns an object of state variables.

Auch ich bin immer:

Error: Can't set headers after they are sent.

Dies passiert, wenn ich versuche, von meiner nicht so borkigen ersten Seite zu einer einzelnen Seite/Ansicht zu navigieren. Das sollte nicht passieren, da ich glaube, dass meine Route ziemlich verschlossen ist.

Diese von Routen/api ist, ich bin mit Express ...

router 
    .route('/') 
    .get((req, res, next) => { 
    return Country.findAll({ include: [Aircraft] }) 
     .then(countries => { 
     countries.filter(country => { 
      return country.aircrafts.length > 0; 
     }); 
     }) 
     .then(countries => res.json(countries)) 
     .catch(next); 
    }) 
    .post((req, res, next) => { 
    if (req.body) { 
     Country.create(req.body) 
     .then(country => { 
      country.save(); 
      res.json(country); 
     }) 
     .catch(next); 
    } 
    }); 

Dies ist die vorgenannte Minderer ist:

import { combineReducers } from 'redux'; 
import axios from 'axios'; 

const initialState = { 
    topFiveCountries: [], 
    oneCountry: {}, 
    countries: [], 
}; 

// ACTION TYPES 

const GET_TOP_COUNTRIES_BY_GFI = 'GET_TOP_COUNTRIES_BY_GFI'; 
const GET_COUNTRY = 'GET_COUNTRY'; 
const GET_COUNTRIES = 'GET_COUNTRIES'; 

// ACTION CREATORS 
export function getTopFiveCountriesByGFI(topFiveCountries) { 
    const action = { 
    type: GET_TOP_COUNTRIES_BY_GFI, 
    topFiveCountries, 
    }; 
    return action; 
} 

export function getCountry(country) { 
    const action = { 
    type: GET_COUNTRY, 
    country, 
    }; 
    return action; 
} 

export function getCountries(countries) { 
    const action = { 
    type: GET_COUNTRIES, 
    countries, 
    }; 
    return action; 
} 

//THUNK CREATORS 

export function fetchTopFiveCountriesByGFI() { 
    return function thunk(dispatch) { 
    return axios 
     .get('/api/countries/top-five-countries') 
     .then(res => res.data) 
     .then(countries => { 
     const action = getTopFiveCountriesByGFI(countries); 
     dispatch(action); 
     }); 
    }; 
} 

export function fetchCountry(countryId) { 
    return function thunk(dispatch) { 
    return axios 
     .get('/api/countries/' + `${countryId}`) 
     .then(res => res.data) 
     .then(country => { 
     const action = getCountry(country); 
     dispatch(action); 
     }); 
    }; 
} 
export function fetchCountries() { 
    return function thunk(dispatch) { 
    return axios 
     .get('/api/countries') 
     .then(res => res.data) 
     .then(countries => { 
     const action = getCountries(countries); 
     dispatch(action); 
     }); 
    }; 
} 

// REDUCER 
const rootReducer = function(state = initialState, action) { 
    switch (action.type) { 
    case GET_COUNTRIES: 
     return action.countries; 
    // return { ...state, countries: action.countries }; 
    // return (state.countries = state.countries.concat(action.countries)); 
    case GET_TOP_COUNTRIES_BY_GFI: 
     // return action.topFiveCountries; 
     return { ...state, topFiveCountries: action.topFiveCountries }; 
    case GET_COUNTRY: 
     return action.country; 
    // return { ...state, oneCountry: action.country }; 

    default: 
     return state; 
    } 
}; 

export default rootReducer; 

Das Komische die Art, wie ich über sie werde nicht zu ungleich füreinander. Sie sind beide stumm Komponenten:

Zuerst wird die TopFiveCountriesByGFI:

import React from 'react'; 
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; 

export default function TopFiveCountriesByGFI(props) { 
    const topFiveCountries = props.topFiveCountries; 

    const flagStyle = { 
    height: '50px', 
    width: '100px', 
    }; 
    return (
    <div className="row"> 
     <div className="twelve columns"> 
     <h2> - Top Five Coutries By GFI -</h2> 
     <table className="u-full-width"> 
      <thead> 
      <tr> 
       <th>Name</th> 
       <th>GFI</th> 
       <th>Flag </th> 
      </tr> 
      </thead> 

      {topFiveCountries.map(function(country) { 
      return (
       <tbody key={country.id}> 
       <tr> 
        <td> 
        <Link className="country-page-link" to={`/countries/${country.id}`}> 
         {country.name} 
        </Link> 
        </td> 
        <td>{country.GFI}</td> 
        <td> 
        <img style={flagStyle} src={country.flagUrl} /> 
        </td> 
       </tr> 
       </tbody> 
      ); 
      })} 
     </table> 
     </div> 
    </div> 
); 
} 

Zweitens ist die Länder anzuzeigen:

import React from 'react'; 
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; 

export default function Countries(props) { 
    console.log('props', props.countries); 

    const countries = props.countries; 
    const flagStyle = { 
    height: '50px', 
    width: '100px', 
    }; 
    return (
    <div className="row"> 
     <div className="twelve columns"> 
     <h2> - Countries -</h2> 
     <table className="u-full-width"> 
      <thead> 
      <tr> 
       <th>Name</th> 
       <th>GFI</th> 
       <th>Flag </th> 
      </tr> 
      </thead> 

      {countries && 
      countries.map(function(country) { 
       return (
       <tbody key={country.id}> 
        <tr> 
        <td> 
         <Link className="country-page-link" to={`/countries/${country.id}`}> 
         {country.name} 
         </Link> 
        </td> 
        <td>{country.GFI}</td> 
        <td> 
         <img style={flagStyle} src={country.flagUrl} /> 
        </td> 
        </tr> 
       </tbody> 
      ); 
      })} 

      {/* {countries ? (
      countries.map(country => { 
       return (
       <tbody key={country.id}> 
        <tr> 
        <td> 
         <Link className="country-page-link" to={`/countries/${country.id}`}> 
         {country.name} 
         </Link> 
        </td> 
        <td>{country.GFI}</td> 
        <td> 
         <img style={flagStyle} src={country.flagUrl} /> 
        </td> 
        </tr> 
       </tbody> 
      ); 
      }) 
     ) : (
      <div>Sorry no content yet!</div> 
     )}*/} 
     </table> 
     </div> 
    </div> 
); 
} 

Jede Hilfe wird geschätzt!

UPDATE Wie Deryck wies darauf hin, eine meiner Endpunkte nichts zurückkehrt war, aber ich bin immer noch immer diese Fehlermeldung:

SingleCountry.state: must be set to an object or null

Answer 1

Sie gelangen wieder einen undefined Wert in Ihrem Versprechen then, die versucht, in res.json(countries) gehen, die dann fehlschlägt/wirft. Es kommt immer noch auf die Seite undefined zurück, was zu Ihrem setState() Problem führt, da nichts da ist.

also innerhalb dieses Blocks

return Country.findAll({ include: [Aircraft] }) 
    .then(countries => { 
    countries.filter(country => {    // <<-------- add `return` before countries 
     return country.aircrafts.length > 0; 
    }); 
    }) 
    .then(countries => res.json(countries))