React 和 Redux 不渲染视图答案

【问题标题】：React and Redux not rendering viewReact 和 Redux 不渲染视图
【发布时间】：2023-03-14 12:55:01
【问题描述】：

所以我正在用 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 时，它会打印出一个连接函数。因此，该文件显然正在被导入。

【问题讨论】：

定义“不会渲染”。页面上有元素吗？或者你的意思是商店没有被传递给元素？
@shennan - 商店似乎没有被传递给元素。因此 mapStateToProps 函数获取状态对象并将书籍道具列表返回到 bookList 容器。但是，这似乎没有发生，如果 console.log(state) 来自 mapStateToProps 内部，我没有得到任何输出。
@ZaidHumayun 在return语句之前将console.log(this.props.books)放入renderList会有什么结果？
@Grajek - 在这种情况下什么都不会打印出来。
你有一个HTML 元素，在你的HTML 中定义了 *"root" 的id？

标签： javascript reactjs react-redux

【解决方案1】：

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

如果链接失效：

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

【讨论】：

嘿，谢谢你的回答。这为我在下面的回答提供了更详细的解释。

【解决方案2】：

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

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

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

【讨论】：