React和Redux没有渲染视图

所以我正在React + Redux中开发一个小型书籍应用程序。但是，由于某种原因，这个观点不会出现，我不知道为什么。代码也不会引发错误。React和Redux没有渲染视图

这里是我的应用程序的结构。

src 
----actions 
----components 
      ----App.js 
----containers 
      ----bookList.js 
----reducers 
      ----book.js 
      ----index.js 
--index.js

下面是各个文件

index.js/src目录

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.js'; 
import {Provider} from 'react-redux'; 
import {createStore} from 'redux'; 
import rootReducer from './reducers/index.js'; 

let store = createStore(rootReducer); 


ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('root') 
);

/components/App.js

import React from 'react'; 
import bookList from '../containers/bookList.js'; 

const App =() => { 
    return (
    <div> 
     <bookList /> 
    </div> 
) 
} 

export default App;

/containers/bookList.js

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 

class bookList extends Component { 
    renderList() { 
     return this.props.books.map(book => { 
      return <li key={book.title}>{book.title}</li> 
     }); 
    } 

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

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

export default connect(mapStateToProps)(bookList);

个

/reducers/index.js

import {combineReducers} from 'redux'; 
import books from './books.js'; 

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

export default rootReducer;

/reducers/book.js

const books =() => { 
    return [ 
     {title: 'JavaScript'}, 
     {title: 'Harry Potter'}, 
     {title: 'Some Random Title'} 
    ] 
} 

export default books;

就像我开始提到的，绝对被抛起来没有任何错误，任何的console.log陈述我试图在bookList.js文件中执行，不显示。

它就像那个文件没有被Babel编译器读取。

但是，当我登录从bookList.js导入到App.js的bookList函数时，它会打印出一个连接函数。所以，该文件显然正在导入。

来源

2016-11-16 random_coder_101

定义“不会渲染”。网页上是否有元素？或者你的意思是商店没有被传递给元素？ – shennan

@shennan - 看起来商店没有被传递给元素。所以mapStateToProps函数获取状态对象并将书籍道具列表返回给bookList容器。然而，这似乎并没有发生，如果从mapStateToProps内部的console.log（state），我没有得到任何输出。 –

@ZaidHumayun在return语句之前将console.log（this.props.books）放入renderList中时，会出现什么结果？ – Grajek

你可以看看这个：User-Defined Components Must Be Capitalized。

在情况下，链接无效：

当一个元素类型以小写字母启动时，它指的是一个内置的状部件或和在传递给React.createElement字符串'div'或'span'结果。以大写字母开头的类型，例如编译为React.createElement(Foo)，并对应于在JavaScript文件中定义或导入的组件。
我们推荐用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在将它用于JSX之前将其分配给大写变量。

来源

2016-11-17 03:06:13

嘿，谢谢你的回答。这为我的答案提供了更详细的解释。 –

好的，我有一个答案给你们，我认为这绝对会像你们一样打动你的思绪。

所以得到这个，显然我需要做的就是在App.js文件和bookList.js文件中的任何单词出现时将'bookList'更改为'BookList'。

我不知道它为什么这样工作。如果有人能解释这一点，我会非常感激。因为这是我第一次遇到代码失败，因为命名语法不同。

来源

2016-11-17 02:59:37

React和Redux没有渲染视图

回答

相关问题