Javascript React Redux将不会渲染，如何对发生的情况进行故障排除？ 我正在开发一个与ReDux反应的应用程序，当没有渲染和没有错误出现时，它是令人沮丧的。在这种情况下，有人能提供一些故障排除实践吗

我看到了一个类似的帖子：

我试图在那里实施这些建议，但对我来说没有任何作用，我只是继续从浏览器中得到一个茫然的眼神

这是我的减速机/reducer\u books.js：

// Step 1. Developing Our Reducer.
// Step 2. In index.js we will wire it in so that it will work
// this is a reducer, just a function and a return with a piece of our application state, a list of books
// to be able to make use of this reducer function anywhere else in our application, we need to export it.
// with export default any other file in our application can import this one and it will just automatically
// receive the books reducer.
export default function() {
  return [ // return array
    {title: 'Coding with Javascript for Dummies'}, // these will be a couple of different books
    {title: 'Meaningful Work'},
    {title: 'Head First Javascript'},
    {title: 'How To Do Everything With Javascript'},
  ]
}

这是我的reducers/index.js：

// Step 2. In index.js we will wire it in so that it will work
// importing Javascript objects that contain methods we need to use
// in order to use React. They are the react library.
import {combineReducers} from 'redux';
import BooksReducer from './reducer_books';

// we need to ensure that this code is generating usable state for our
// application by creating a booklist component within react
const rootReducer = combineReducers({
    // this gives us the same mapping of state
    // key is books and value is BooksReducer
    // passing this into the function combineReducers is essentially telling
    // reduce how to create our application state
    // the single piece of state is books
    books: BooksReducer
});

export default rootReducer;

这是我在container/book-list.js中升级为容器的组件：

// purpose of this component is to render a list of books
// we are going to use the react-redux library by making use of one of our components
// as a container instead.
// A container is a react component that has a direct connection to the state
// managed by redux.
// React and Redux are two separate libraries, this file is the melding of both
// libraries, thereby making this component aware of the state contained in Redux.
import React, {Component} from 'react';
// pulling off a single property called connect
// this is the glue between React and Redux, only through this library do we
// merge them. React-Redux in turn makes this connect function available.
import {connect} from 'react-redux';

class BookList extends Component {
  // new function
  renderList() {
    // plugin our application state as this.props.books
    return this.props.books.map((book) => { // mapping the array
        return (
          // for each book in the array, we create a list with title
          <li key={book.title} className="list-group-item">{book.title}</li> // because it is a list we have to add a key
        );
    });
  }
  render() {
    return (
      <ul className="list-group col-sm-4">
        // when calling a separate function inside of JSX, we write curly braces
        // this calls a new function of renderList
        // helper function, which is a function that helps another function
        {this.renderList()}
      </ul>
    )
  }
}
// This function is the glue between React and Redux.
// purpose of this function is to take our application state as an argument
// our state contains the array of books and the active book
// The argument is a state that returns an object.
function mapStateToProps(state) {
  // Whatever is returned will show up as props
  // inside of BookList
  return {
    // the object returned with a key of books and a value of state.books
    // because our books reducer is returning the books property, the array of
    // objects.
    books: state.books
  };
}

// the connect function says take this component, take this map.state to props
// and returns a container. The container is aware of the state in Redux.
// In a container file we do not want to export the BookList, we want to export
// the container
export default connect(mapStateToProps)(BookList);

---

在代码中抛出调试器。然后打开Chrome开发工具面板。导航到console选项卡

调试器如下所示（您可以将其放在任何位置，而不是放在return语句中）：

类图书列表扩展组件{
//新功能
renderList（）{
调试器
//将我们的应用程序状态插件为this.props.books
返回此.props.books.map（（book）=>{//映射数组
返回(
//对于数组中的每本书，我们创建一个带有标题的列表
{book.title}
//因为它是一个列表，我们必须添加一个键
);
});
}
//...

如果代码运行超过调试器，它将在控制台中停止，并允许您与当前作用域进行交互

因此，您可以在控制台中键入

this.props.books

，看看它是否能满足您的期望

它还可以方便地检查正在运行的代码

---

访问页面时是否加载了任何内容？检查html时，查看是否加载了index.html内容。该内容在页面上不可见，因为它没有实际内容，但可以在Chrome开发工具中查看。

在代码中插入调试器。然后打开Chrome开发工具面板。导航到控制台选项卡

调试器如下所示（您可以将其放在任何位置，而不是放在return语句中）：

类图书列表扩展组件{
//新功能
renderList（）{
调试器
//将我们的应用程序状态插件为this.props.books
返回此.props.books.map（（book）=>{//映射数组
返回(
//对于数组中的每本书，我们创建一个带有标题的列表
{book.title}
//因为它是一个列表，我们必须添加一个键
);
});
}
//...

如果代码运行超过调试器，它将在控制台中停止，并允许您与当前作用域进行交互

因此，您可以在控制台中键入

this.props.books

，看看它是否能满足您的期望

它还可以方便地检查正在运行的代码

---

---

访问页面时是否加载了任何内容？当您检查html时，查看是否加载了index.html内容。它在页面上不可见，因为它没有实际内容，但可以在Chrome开发工具中查看。

您是否尝试使用Chrome调试工具进行React和Redux？是否使用React的开发版本？这将为您提供很好的错误消息。@jmargolisvt，我已经为Chrome开发工具安装了React功能，但它通常在识别出该应用程序为React应用程序后弹出。在这种情况下，它似乎无法识别该应用程序为React应用程序。在添加Redux之前，这是否起作用？我在这里没有看到React DOM。@jmargolisvt，是的，在我开始开发它之前d样板“反应简单启动”是它以前呈现的内容。您是否尝试过将Chrome调试工具用于React和Redux？您是否使用React的开发版本？这将为您提供良好的错误消息。@jmargolisvt，我已经为Chrome开发工具安装了React功能，但它通常会在识别出该应用程序为React应用程序后弹出。在这种情况下，它不会显示为r认识到它是一个React应用程序。在添加Redux之前，它工作了吗？我在这里没有看到ReactDOM。@jmargolisvt，是的，在我开始开发它之前，它有一个样板文件“React simple starter”是它之前呈现的。嘿，实验中，我将调试器放在那里，并在控制台中键入this.props.books，我在控制台中得到：Uncaught TypeError:无法读取未定义at:1:11的属性“books”。要在样式表的元素中回答您的问题，javascript和容器类正在加载。这是有价值的信息。T这意味着您将调试器放置在何处this.props=undefined。您可以通过将调试器移动到导致该函数调用的函数来跟踪这一点，以查看您丢失道具的位置。（或者只是添加大量调试器并观察应用程序的流程。）您似乎还缺少“MapPropsToState”。这对于将信息放在正确的位置可能很重要。您是偶然运行webpack的吗？实验中，我添加了mapstateTops，并且在上面添加了我的webpack.config.js文件。对不起，我的不好。这是漫长的一天。我的意思是

MapDispatchToProps

。我没有看到上面的任何内容使用

dispatch

或

action

进行编辑，因此您的代码呈现的路径对我来说有点模糊，无法看到整个画面。一定要使用调试器语句来查看事情是如何进行的。另外，您如何将内容插入到输入文件中的页面中？嘿，实验，那是空的src/index.js问题就出在这里。我添加了导入中间件常量和ReactDOM.render以及瞧！感谢您的帮助和耐心。嘿，实验，我把调试器放在那里，并在控制台中键入this.props.books，我在控制台中得到了这个结果：Uncaught TypeError:无法读取未定义的属性“books”：1:11。要在中回答您的问题元素样式表、javascript和正在加载的容器类。这是有价值的信息。这意味着您将调试器放置在何处。props=undefined。您可以通过将调试器移动到导致该函数调用的函数来跟踪这一点，以查看您丢失道具的位置。（或者只是添加大量调试器。）

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

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

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

class BookList extends Component {
  // new function
  renderList() {

    debugger

    // plugin our application state as this.props.books
    return this.props.books.map((book) => { // mapping the array
        return (
          // for each book in the array, we create a list with title
          <li key={book.title} className="list-group-item">{book.title}</li> // because it is a list we have to add a key
        );
    });
  }
  //...