Question

我有针脚指出我的错误，知道哪条线导致它我只是不知道为什么。我正在遵循一个教程并将代码从他的代码复制到我的代码中，所以我不知道为什么它不起作用。

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

Answer 1

在您的减速机中，您有：

Console.log('Zones received');

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

console.log('Zones received');

Answer 2

JS是区分大小写的，你编写了很棒的代码，但是你错过了一些小的东西;），这有助于

console.log('Zones received');

获取错误：在redux

2 个答案: