Reactjs 获取错误：在redux中未定义控制台

我用pin码指出了我的错误，知道是哪一行引起的，我只是不知道为什么。我遵循一个教程，从他的代码复制到我的代码，所以我不知道为什么它不起作用

在

组件didmount

函数内的区域容器内。行

store.currentStore（）.dispatch（actions.zonesReceived（results））

是引发错误的行。当加载组件时，我得到错误

控制台未定义

因为您需要更多的信息来了解这一行的内容，所以我将在下面发布其余的代码

区域容器：

import React, { Component } from 'react';
import { Zone, CreateZone } from '../presentation';
import { APIManager } from '../../utils';
import store from '../../stores/store';
import actions from '../../actions/actions';
import { connect } from 'react-redux';

class Zones extends Component {
  constructor() {
    super();

    this.state = {
      selected: 0,
      list: []
    };
  }

  componentDidMount() {
    console.log('componentDidMount: ');
    APIManager.get('/api/zone', null, (err, results) => {
      if (err) {
        alert(`ERROR apiget: ${err.message}`);
        return;
      }

      store.currentStore().dispatch(actions.zonesReceived(results));
    });
  }

  submitZone(zone) {
    let updatedZone = Object.assign({}, zone);

    APIManager.post('/api/zone', updatedZone, (err, result) => {
      if (err) {
        alert(`ERROR: ${err.message}`);
        return;
      }

      let updatedList = Object.assign([], this.state.list);
      updatedList.push(result);
      this.setState({
        list: updatedList
      });
    });
  }

  selectZone(zoneIndex) {
    console.log('selectZone');
    this.setState({
      selected: zoneIndex
    });
  }

  render() {
    const listItems = this.state.list.map((item, i) => {
      let selected = i == this.state.selected;
      return (
        <li key={i}>
          <Zone
            zoneIndex={i}
            select={this.selectZone.bind(this)}
            isSelected={selected}
            zone={item}
          />
        </li>
      );
    });

    return (
      <div className="zone-container">
        <h2>Zones</h2>
        <ul>
          {listItems}
        </ul>

        <CreateZone onCreate={this.submitZone.bind(this)} />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    list: state.zone.list
  };
};

export default connect(mapStateToProps)(Zones);

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import zoneReducer from '../reducers/zoneReducer';

let store;

export default {
  configureStore: () => {
    const reducers = combineReducers({
      zone: zoneReducer
    });

    store = createStore(reducers, applyMiddleware(thunk));

    return store;
  },

  currentStore: () => {
    return store;
  }
};

export default {
  ZONES_RECEIVED: 'ZONES_RECEIVED',
  COMMENTS_RECEIVED: 'COMMENTS_RECEIVED'
};

import constants from '../constants/constants';

const initialState = {
  list: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case constants.ZONES_RECEIVED:
      Console.log('Zones received');
      let updatedState = Object.assign({}, state);
      updatedState['list'] = action.zones;

      return updatedState;

    default:
      return state;
  }
};

行动：

import constants from '../constants/constants';

export default {
  zonesReceived: zones => {
    return {
      type: constants.ZONES_RECEIVED,
      zones: zones
    };
  }
};

常数：

import React, { Component } from 'react';
import { Zone, CreateZone } from '../presentation';
import { APIManager } from '../../utils';
import store from '../../stores/store';
import actions from '../../actions/actions';
import { connect } from 'react-redux';

class Zones extends Component {
  constructor() {
    super();

    this.state = {
      selected: 0,
      list: []
    };
  }

  componentDidMount() {
    console.log('componentDidMount: ');
    APIManager.get('/api/zone', null, (err, results) => {
      if (err) {
        alert(`ERROR apiget: ${err.message}`);
        return;
      }

      store.currentStore().dispatch(actions.zonesReceived(results));
    });
  }

  submitZone(zone) {
    let updatedZone = Object.assign({}, zone);

    APIManager.post('/api/zone', updatedZone, (err, result) => {
      if (err) {
        alert(`ERROR: ${err.message}`);
        return;
      }

      let updatedList = Object.assign([], this.state.list);
      updatedList.push(result);
      this.setState({
        list: updatedList
      });
    });
  }

  selectZone(zoneIndex) {
    console.log('selectZone');
    this.setState({
      selected: zoneIndex
    });
  }

  render() {
    const listItems = this.state.list.map((item, i) => {
      let selected = i == this.state.selected;
      return (
        <li key={i}>
          <Zone
            zoneIndex={i}
            select={this.selectZone.bind(this)}
            isSelected={selected}
            zone={item}
          />
        </li>
      );
    });

    return (
      <div className="zone-container">
        <h2>Zones</h2>
        <ul>
          {listItems}
        </ul>

        <CreateZone onCreate={this.submitZone.bind(this)} />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    list: state.zone.list
  };
};

export default connect(mapStateToProps)(Zones);

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import zoneReducer from '../reducers/zoneReducer';

let store;

export default {
  configureStore: () => {
    const reducers = combineReducers({
      zone: zoneReducer
    });

    store = createStore(reducers, applyMiddleware(thunk));

    return store;
  },

  currentStore: () => {
    return store;
  }
};

export default {
  ZONES_RECEIVED: 'ZONES_RECEIVED',
  COMMENTS_RECEIVED: 'COMMENTS_RECEIVED'
};

import constants from '../constants/constants';

const initialState = {
  list: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case constants.ZONES_RECEIVED:
      Console.log('Zones received');
      let updatedState = Object.assign({}, state);
      updatedState['list'] = action.zones;

      return updatedState;

    default:
      return state;
  }
};

减速器：

import React, { Component } from 'react';
import { Zone, CreateZone } from '../presentation';
import { APIManager } from '../../utils';
import store from '../../stores/store';
import actions from '../../actions/actions';
import { connect } from 'react-redux';

class Zones extends Component {
  constructor() {
    super();

    this.state = {
      selected: 0,
      list: []
    };
  }

  componentDidMount() {
    console.log('componentDidMount: ');
    APIManager.get('/api/zone', null, (err, results) => {
      if (err) {
        alert(`ERROR apiget: ${err.message}`);
        return;
      }

      store.currentStore().dispatch(actions.zonesReceived(results));
    });
  }

  submitZone(zone) {
    let updatedZone = Object.assign({}, zone);

    APIManager.post('/api/zone', updatedZone, (err, result) => {
      if (err) {
        alert(`ERROR: ${err.message}`);
        return;
      }

      let updatedList = Object.assign([], this.state.list);
      updatedList.push(result);
      this.setState({
        list: updatedList
      });
    });
  }

  selectZone(zoneIndex) {
    console.log('selectZone');
    this.setState({
      selected: zoneIndex
    });
  }

  render() {
    const listItems = this.state.list.map((item, i) => {
      let selected = i == this.state.selected;
      return (
        <li key={i}>
          <Zone
            zoneIndex={i}
            select={this.selectZone.bind(this)}
            isSelected={selected}
            zone={item}
          />
        </li>
      );
    });

    return (
      <div className="zone-container">
        <h2>Zones</h2>
        <ul>
          {listItems}
        </ul>

        <CreateZone onCreate={this.submitZone.bind(this)} />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    list: state.zone.list
  };
};

export default connect(mapStateToProps)(Zones);

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import zoneReducer from '../reducers/zoneReducer';

let store;

export default {
  configureStore: () => {
    const reducers = combineReducers({
      zone: zoneReducer
    });

    store = createStore(reducers, applyMiddleware(thunk));

    return store;
  },

  currentStore: () => {
    return store;
  }
};

export default {
  ZONES_RECEIVED: 'ZONES_RECEIVED',
  COMMENTS_RECEIVED: 'COMMENTS_RECEIVED'
};

import constants from '../constants/constants';

const initialState = {
  list: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case constants.ZONES_RECEIVED:
      Console.log('Zones received');
      let updatedState = Object.assign({}, state);
      updatedState['list'] = action.zones;

      return updatedState;

    default:
      return state;
  }
};

在减速器中，您有：

Console.log('Zones received');

JavaScript区分大小写。将此更改为：

console.log('Zones received');

JS是区分大小写的，您编写了很棒的代码，但遗漏了一些小东西；）希望这有帮助

console.log('Zones received');

投票结束，因为这是一个打字错误。当你遇到一个错误，说某个东西没有定义时，首先要做的是将你的代码按显示的字符串进行grep。是的，我从来没有打错，所以我可能只是忽略了它。