React 和 Redux 不渲染视图

Question

所以我正在用 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;

就像我在开头提到的，绝对没有错误被抛出，并且我试图在 bookList.js 文件中执行的任何 console.log 语句都不会出现。

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

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

Answer 1

好的，我有一个答案要告诉你们，我认为这绝对会让你们大吃一惊，就像我的一样。

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

我不知道为什么会这样。如果有人能解释一下，我将非常感激。因为这是我第一次遇到由于命名语法不同而导致代码失败的情况。

Answer 2

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

如果 link 无效：

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

React 和 Redux 不渲染视图

React and Redux not rendering view

javascript

reactjs

react-redux