React-Redux 不会渲染，我该如何解决发生的问题？

Question

我正在使用 Redux 在 React 中开发一个应用程序，当什么都没有呈现并且没有出现错误时，这令人沮丧。任何人都可以在这种情况下提供一些故障排除实践吗？

我看到一个类似的帖子：React/Redux Component will not render

我尝试在那里实施这些建议，但它对我没有任何帮助，我只是继续从浏览器中得到一个空白的凝视。

这是我的 reducers/reducer_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);

这是书单/index.html：

<!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>

这是组件/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>
    );
  }
}

添加 webpack.config.js 文件：

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: './'
  }
};

Answer 1

在您的代码中添加一个调试器。然后打开 Chrome 开发工具面板。导航到控制台选项卡。

调试器看起来像这样（你可以把它放在任何地方，而不是在 return 语句中）：

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

如果您的代码通过调试器运行，它将在控制台中停止并允许您与当前范围进行交互。

因此，您可以在控制台中输入this.props.books 并查看它是否提供了您所期望的。

检查哪些代码正在运行也很方便。

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