javascript - React-Redux 程序返回“TypeError: Cannot read property 'map' of undefined”
问题描述
我正在学习 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 并通过 combine reducer 将其放入 state 对象中（对吗？）。
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”，我想在其中引入这些数据。但我正在尝试打印出状态，它只是空的；~；很困惑..我喜欢检查地图状态到道具功能，它应该可以工作吗？
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>
解决方案
这会让你继续：
组件/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>
);
}
}
容器/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'));
减速器-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;
减速器.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;
推荐阅读
- sql - PostgreSQL 按单个值过滤组
- html - 在 HTML 中使用 SVG 字形标记
- angular - Angular 4：使用 SAML 和令牌交换进行身份验证
- javascript - 仅获取存储在 localStorage 中的项目的值
- sapui5 - 将外部库添加到 SAPUI5
- python-3.x - 求解变量取二进制值的线性方程组
- google-kubernetes-engine - 如何从 GKE 执行 kubelet
- jsf - 替换为 p:dataTable
- sql - 通过 source() 调用 R 中的 sqlQuery 失败
- android - 如何在 NestedScrollView 中将 FirestorePagingAdapter 用于 RecyclerView