Question

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

到目前为止，我有两个想要渲染的观点。两者都从我的express / api端点返回一个集合。一个行为正确，另一个完全borks。

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

在不那么笨拙的页面上：

invariant.js：42 Uncaught（在promise中）错误：setState（...）：需要一个要更新的状态变量的对象或返回的函数状态变量的对象。

和

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

在第二页：

Uncaught（在promise中）错误：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;

我对他们的看法很有趣但彼此并不太相似。它们都是愚蠢的组成部分：

首先是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>
  );
}

其次是国家观点：

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

任何帮助将不胜感激！

更新正如Deryck指出的那样，我的一个终点并没有返回任何东西，但我仍然收到这个错误：

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

Answer 1

您在承诺的undefined内返回then值，该值会尝试进入res.json(countries)然后失败/抛出。它仍会以undefined的形式返回页面，导致您出现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))

Redux reducer：不确定我是否正确设置项目（新旧）

1 个答案: