javascript - 为什么我的状态未定义，即使我默认将其设置为空数组？

Question

我收到“无法读取未定义的属性‘映射’”错误

{props.decks.map((deck, i) => 

我的侧边栏组件

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { addDeck, showAddDeck, hideAddDeck } from '../actions';

const mapStateToProps = ({decks, addingDeck}) => ({
  decks,
  addingDeck
});

const mapDispatchToProps = dispatch => ({
  addDeck: name => dispatch(addDeck(name)),
  showAddDeck: () => dispatch(showAddDeck()),
  hideAddDeck: () => dispatch(hideAddDeck())
});

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.createDeck = this.createDeck.bind(this);
  }
  componentDidUpdate() {
    var el = ReactDOM.findDOMNode(this.refs.add);
    if (el) el.focus();
  }
  render() {
    let props = this.props;
    return  (
      <div className='sidebar'>
        <h2> All Decks </h2>
        <button onClick={ e => this.props.showAddDeck() }>
          New Decks
        </button>
        <ul>
          {props.decks.map((deck, i) => 
            <li key={i}> {deck.name} </li>
            )}
        </ul>
        {props.addingDeck && <input ref='add' onKeyPress={this.createDeck} />}
      </div>);
  }
  createDeck(evt) {
    const ENTER = 13;
    if (evt.which !== ENTER) return;
    var name = ReactDOM.findDOMNode(this.refs.add).value;
    this.props.addDeck(name);
    this.props.hideAddDeck();
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

我在reducers.js中默认将状态设置为空数组

所以我不明白为什么我的 props.decks 不足

是 ES6 的问题吗？

export const decks = (state, action) => {
  switch (action.type) {
    case 'ADD_DECK':
      let newDeck = { name: action.data, id: +new Date };
      return state.concat([newDeck]);
    default: 
      return state || [];
  }
};

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { Router, Route, browserHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer, ConnectedRouter  } from 'react-router-redux';
import * as reducers from './reducers';
import './index.css';
import App from './components/App';


const store = createStore(combineReducers({reducers,
    routing: routerReducer}));
const history = syncHistoryWithStore(browserHistory, store);

function run () {
  let state = store.getState();
  ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Route path='/' component={App}></Route>
      </Router>
    </Provider>, document.getElementById('root'));
}

run();
store.subscribe(run);

和App.js

import React from 'react';
import Sidebar from './Sidebar';

const App = ( props ) => {
  return (
    <div className='app'>
      <Sidebar />
      { props.children }
    </div>);
};

export default App;

和package.json

{
  "name": "flashcard-app-3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "fuzzysearch": "^1.0.3",
    "history": "^4.7.2",
    "live-server": "^1.2.0",
    "prop-types": "^15.6.0",
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.1",
    "redux": "^3.3.1",
    "watchify": "^3.9.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "set PORT=3001 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

问题出现在您创建商店的行中。如果您想通过 state.decks 访问该州的套牌，您应该使用

combineReducers({ routing: routerReducer, ...reducers })

这样，reducers 的属性将被添加到您传递给 combineReducers 的对象中。否则，您必须像这样访问您的状态:state.reducers.decks。

如果您想了解更多相关信息，请查看 MDN .