【问题标题】:Getting Error: console is not defined in redux出现错误:控制台未在 redux 中定义
【发布时间】:2017-08-23 20:49:12
【问题描述】:

我已经指出了我的错误并且知道是哪一行导致了它我只是不知道为什么。我正在学习一个教程并将代码从他的代码复制到我的,所以我不知道为什么它不起作用。

componentDidMount 函数内的区域容器内。 store.currentStore().dispatch(actions.zonesReceived(results)); 行是引发错误的行。当组件加载时,我收到错误Console is not defined

由于您需要更多信息才能查看该行的所有内容,因此我将在下面发布其余代码。

区域容器:

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

行动:

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

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

常量:

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

【问题讨论】:

  • 投票结束,因为这是一个错字。当您收到错误提示未定义某些内容时,首先要做的是 grep 您的代码以获取显示的确切字符串。
  • 是的,我从来没有打错,所以我可能只是忽略了它。

标签: reactjs redux react-redux


【解决方案1】:

在你的减速器中你有:

Console.log('Zones received');

JavaScript 区分大小写。将其更改为:

console.log('Zones received');

【讨论】:

    【解决方案2】:

    JS 是区分大小写的,你写了很棒的代码,但你错过了一些小东西;)希望这有帮助

    console.log('Zones received');
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-02
      • 2018-07-16
      • 2021-09-04
      • 2013-09-18
      相关资源
      最近更新 更多