Javascript Redux reducer：不确定是否将项目（新的或旧的）设置为正确状态

我正在为我在学校的期末项目创建一个网站

到目前为止，我有两个观点，我正试图呈现。两者都从我的express/api端点返回集合。一个行为正确，另一个完全不正常

我相信我的问题在于我在减速器中创建新状态的方式，以及知道一个哑组件何时可以访问道具的方式。但在我们开始之前，这里是错误

在不那么古怪的页面上：

invariant.js:42未捕获（承诺中）错误：setState（…）：接受 要更新的状态变量的对象或返回 状态变量的对象

以及

警告：SingleCountry.state:必须设置为对象或null

在第二页：

未捕获（承诺中）错误：setState（…）：获取状态对象 要更新的变量或返回状态对象的函数 变量

我还得到：

错误：发送邮件后无法设置邮件头

当我试图从我不那么僵硬的第一页导航到单个页面/视图时，就会发生这种情况。这不应该发生，因为我相信我的路线几乎被封锁了

这是来自routes/api，我正在使用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);
    }
  });

这是前面提到的减速器：

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;

有趣的是，我对待他们的方式彼此并没有太大的不同。它们都是哑组件：

首先，排名前五的国家BYGFI：

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>
  );
}

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
导出默认函数TopFiveCountriesByGFI（道具）{
const topFiveCountries=props.topFiveCountries；
常量flagStyle={
高度：'50px'，
宽度：“100px”，
};
返回(
-GFI排名前五的国家-
名称
GFI
旗帜
{topFiveCountries.map（功能（国家/地区）{
返回(
{country.name}
{country.GFI}
);
})}
);
}

二是国家观：

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>
  );
}

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
导出默认功能国家/地区（道具）{
console.log（'props'，props.countries）；
const countries=props.countries；
常量flagStyle={
高度：'50px'，
宽度：“100px”，
};
返回(
-国家-
名称
GFI
旗帜
{国家&&
国家。地图（功能（国家）{
返回(
{country.name}
{country.GFI}
);
})}
{/*{国家(
countries.map（国家=>{
返回(
{country.name}
{country.GFI}
);
})
) : (
对不起，还没有内容！
)}*/}
);
}

任何帮助都将不胜感激

更新 正如Deryck指出的，我的一个端点没有返回任何内容，但我仍然会遇到以下错误：

---

SingleCountry.state:必须设置为对象或null

您在承诺的

中返回一个
未定义的
值，然后
，该值尝试进入
res.json（国家）
，然后失败/抛出。它返回页面时仍然是
未定义的
，这会导致
setState（）
问题，因为那里没有任何内容

所以，在这个街区里面

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

returncountry.findAll（{include:[飞机]}）
.然后（国家=>{
countries.filter（country=>{//res.json（countries））
您在承诺的
中返回一个
未定义的
值，该值试图进入
res.json（countries）
，然后失败/抛出。它仍然返回页面作为
未定义的
，导致
setState（）
问题，因为那里没有任何内容

所以，在这个街区里面

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

returncountry.findAll（{include:[飞机]}）
.然后（国家=>{
countries.filter（country=>{//res.json（countries））
嘿，谢谢你，这似乎让我走出了荒野深处的一层…（非常感谢）。我仍然会遇到这个错误，即当我尝试单击第一个集合进入单个视图时。
SingleCountry.state:必须设置为object或null
我可能只是有点失明，但我看不到
SingleCountry
任何地方。谢谢你，这似乎让我走出了荒野深处的一层…（非常感谢）。我仍然会遇到此错误，即当我尝试将第一个集合单击到单个视图中时。
SingleCountry.state:必须设置为对象或null
我可能有点盲目，但我在任何地方都看不到
SingleCountry