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函数时，我从bookList.js导入到App.js中，它打印出一个connect函数。因此，该文件显然正在导入。

Answer 1

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

如果链接无效：

当元素类型以小写字母开头时，它引用内置组件，如或，并导致字符串'div'或'span'传递给React.createElement。以大写字母开头的类型，如编译为React.createElement(Foo)，对应于在JavaScript文件中定义或导入的组件我们建议使用大写字母命名组件。如果你有一个以小写字母开头的组件，在将它用于JSX之前将其分配给大写变量。

Answer 2

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

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

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

React和Redux不呈现视图

2 个答案: