javascript - React-Redux 程序返回 "TypeError: Cannot read property ' map' of undefined"

Question

我正在学习 react-redux，我们只是想从后端引入一个基本对象。我的商店目前是空的，我已经尽可能地按照我正在使用的教程进行操作。

文件 1:“reducer-books.js”。这个文件只是定义了我想要存储并传递到全局“状态”中的内容。

export default function() {
    return [
      { title: "Javascript: The Good Parts", pages: 101 },
      { title: "Harry Potter", pages: 39 },
      { title: "The Dark Tower", pages: 85 },
      { title: "Eloquent Ruby", pages: 1 }
    ;
  }

文件 2:“index.js”。在这里，我采用上面定义的 Books Reducer 并通过组合 reducer 将其放入状态对象(对吗？)。

import { combineReducers } from "redux";
import { BooksReducer } from "./reducer-books";

//Reducer = a function that returns a piece of the application state.
//Just a function that does that. Period.
//Because the applicaiton can have many different pieces of state, we
//can have MANY reducers.

const rootReducer = combineReducers({
  books: BooksReducer
});

export default rootReducer;

文件 3:“book-list.js”，我想在其中引入这些数据。但是我试图打印出状态，它只是空的；~；很困惑..我喜欢检查 map 状态到 Prop 功能，它应该可以工作吗？

import React, { Component } from "react";

import { connect } from "react-redux"; // redact-redux is the glue between these two!

class BookList extends Component {
    renderList() {

        console.log("hmm?");
        console.log(this.props);
        console.log("HMMM?");
        console.log(this.props.book);
        console.log(this.props.books);
        console.log("HMMM?3333");
        console.log("HMMM?");

        return this.props.books.map((book) => {
            return (
                <li key={book.title} className="list-group-item">
                    {book.title}
                </li>
            );
        });


    render() {
        return (
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        )
   }
}


function mapStateToProps(state) {
    console.log("below hm?");
    console.log(state);
    return {
        books: state.books
    }
}

export default connect(mapStateToProps)(BookList);

文件 4:app.js

import React from "react";
import { Component } from "react";

import BookList from "../containers/book-list";

export default class App extends Component {
  render() {
      return (
          <div>
            <BookList />
          </div>
        );
      }
    }

文件 5:index.js(我猜这个文件是“根文件”？

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

//Reducer = a function that returns a piece of the application state.
//Just a function that does that. Period.
//Because the applicaiton can have many different pieces of state, we 
//can have MANY reducers.
const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

这是此错误的控制台输出:

bundle.js:21363 No reducer provided for key "books"
warning @ bundle.js:21363
combineReducers @ bundle.js:21448
Object.defineProperty.value @ bundle.js:22554
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:72
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:47
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
bundle.js:21363 Store does not have a valid reducer. Make sure the argument     
passed to combineReducers is an object whose values are reducers.
warning @ bundle.js:21363
combination @ bundle.js:21481
dispatch @ bundle.js:21269
createStore @ bundle.js:21344
(anonymous) @ bundle.js:21611
(anonymous) @ bundle.js:86
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:47
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
bundle.js:22503 below hm?
bundle.js:22504 {}
bundle.js:22462 hmm?
bundle.js:22463 {books: undefined, dispatch: ƒ}
bundle.js:22464 HMMM?
bundle.js:22465 undefined
bundle.js:22466 undefined
bundle.js:22467 HMMM?3333
bundle.js:22468 HMMM?
bundle.js:22462 hmm?
bundle.js:22463 {books: undefined, dispatch: ƒ}
bundle.js:22464 HMMM?
bundle.js:22465 undefined
bundle.js:22466 undefined
bundle.js:22467 HMMM?3333
bundle.js:22468 HMMM?
bundle.js:22470 Uncaught TypeError: Cannot read property 'map' of undefined
    at BookList.renderList (bundle.js:22470)
    at BookList.render (bundle.js:22484)
    at finishClassComponent (bundle.js:11048)
    at updateClassComponent (bundle.js:11016)
    at beginWork (bundle.js:11641)
    at performUnitOfWork (bundle.js:14473)
    at workLoop (bundle.js:14502)
    at HTMLUnknownElement.callCallback (bundle.js:2759)
    at Object.invokeGuardedCallbackDev (bundle.js:2797)
    at invokeGuardedCallback (bundle.js:2846)
renderList @ bundle.js:22470
render @ bundle.js:22484
finishClassComponent @ bundle.js:11048
updateClassComponent @ bundle.js:11016
beginWork @ bundle.js:11641
performUnitOfWork @ bundle.js:14473
workLoop @ bundle.js:14502
callCallback @ bundle.js:2759
invokeGuardedCallbackDev @ bundle.js:2797
invokeGuardedCallback @ bundle.js:2846
replayUnitOfWork @ bundle.js:13977
renderRoot @ bundle.js:14544
performWorkOnRoot @ bundle.js:15108
performWork @ bundle.js:15029
performSyncWork @ bundle.js:15006
requestWork @ bundle.js:14906
scheduleWorkImpl @ bundle.js:14781
scheduleWork @ bundle.js:14741
scheduleRootUpdate @ bundle.js:15369
updateContainerAtExpirationTime @ bundle.js:15397
updateContainer @ bundle.js:15424
ReactRoot.render @ bundle.js:18728
(anonymous) @ bundle.js:19147
unbatchedUpdates @ bundle.js:15216
legacyRenderSubtreeIntoContainer @ bundle.js:19143
render @ bundle.js:19202
(anonymous) @ bundle.js:84
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:47
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
bundle.js:12302 The above error occurred in the <BookList> component:
    in BookList (created by Connect(BookList))
    in Connect(BookList) (created by App)
   in div (created by App)
    in App
    in Provider


Visit <redacted>
logCapturedError @ bundle.js:12302
logError @ bundle.js:12341
commitErrorLogging @ bundle.js:12554
commitAllLifeCycles @ bundle.js:14118
callCallback @ bundle.js:2759
invokeGuardedCallbackDev @ bundle.js:2797
invokeGuardedCallback @ bundle.js:2846
commitRoot @ bundle.js:14253
completeRoot @ bundle.js:15161
 @ bundle.js:15111
performWork @ bundle.js:15029
performSyncWork @ bundle.js:15006
requestWork @ bundle.js:14906
scheduleWorkImpl @ bundle.js:14781
scheduleWork @ bundle.js:14741
scheduleRootUpdate @ bundle.js:15369
updateContainerAtExpirationTime @ bundle.js:15397
updateContainer @ bundle.js:15424
ReactRoot.render @ bundle.js:18728
(anonymous) @ bundle.js:19147
unbatchedUpdates @ bundle.js:15216
legacyRenderSubtreeIntoContainer @ bundle.js:19143
render @ bundle.js:19202
(anonymous) @ bundle.js:84
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:47
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
bundle.js:22470 Uncaught TypeError: Cannot read property 'map' of undefined
at BookList.renderList (bundle.js:22470)
at BookList.render (bundle.js:22484)
at finishClassComponent (bundle.js:11048)
at updateClassComponent (bundle.js:11016)
at beginWork (bundle.js:11641)
at performUnitOfWork (bundle.js:14473)
at workLoop (bundle.js:14502)
at renderRoot (bundle.js:14533)
at performWorkOnRoot (bundle.js:15108)
at performWork (bundle.js:15029)
renderList @ bundle.js:22470
render @ bundle.js:22484
finishClassComponent @ bundle.js:11048
updateClassComponent @ bundle.js:11016
beginWork @ bundle.js:11641
performUnitOfWork @ bundle.js:14473
workLoop @ bundle.js:14502
renderRoot @ bundle.js:14533
performWorkOnRoot @ bundle.js:15108
performWork @ bundle.js:15029
performSyncWork @ bundle.js:15006
requestWork @ bundle.js:14906
scheduleWorkImpl @ bundle.js:14781
scheduleWork @ bundle.js:14741
scheduleRootUpdate @ bundle.js:15369
updateContainerAtExpirationTime @ bundle.js:15397
updateContainer @ bundle.js:15424
ReactRoot.render @ bundle.js:18728
(anonymous) @ bundle.js:19147
unbatchedUpdates @ bundle.js:15216
legacyRenderSubtreeIntoContainer @ bundle.js:19143
render @ bundle.js:19202
(anonymous) @ bundle.js:84
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:47
__webpack_require__ @ bundle.js:20
anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
contentscript.js:58 <body>​…​</body>​

Answer 1

这会让你继续:

组件/app.js:

import React from "react";
import { Component } from "react";

import BookList from "../containers/book-list";

export default class App extends Component {
  render() {
    return (
        <div>
          <BookList />
        </div>
      );
  }
}

containers/book-list.js:

import React, { Component } from "react";
import { connect } from "react-redux"; // redact-redux is the glue between these two!

class BookList extends Component {
    renderList() {
        return this.props.books.map((book) => {
            return (
                <li key={book.id} className="list-group-item">
                    {book.title}
                </li>
            );
        });
    }

    render() {
        return (
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        )
    }
}

const mapStateToProps = (state) => ({
    books: state.books
});

export default connect(mapStateToProps)(BookList);

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import App from './components/app';
import reducers from './reducers';

ReactDOM.render(
  <Provider store={createStore(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

reducer-books.js:

const reducer = () => {
  return [
    { id: 1, title: 'Javascript: The Good Parts', pages: 101 },
    { id: 2, title: 'Harry Potter', pages: 39 },
    { id: 3, title: 'The Dark Tower', pages: 85 },
    { id: 4, title: 'Eloquent Ruby', pages: 1 }
  ];
};

export default reducer;

reducers.js:

import { combineReducers } from "redux";
import BooksReducer from "./reducer-books";

//Reducer = a function that returns a piece of the application state.
//Just a function that does that. Period.
//Because the applicaiton can have many different pieces of state, we
//can have MANY reducers.

const rootReducer = combineReducers({
  books: BooksReducer
});

export default rootReducer;