0
私は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文I bookList.jsファイルで実行しようとしましたが、表示されません。
そのファイルはBabelコンパイラによって読み取られていないようです。
しかしbookList関数をログに記録すると、bookList.jsからApp.jsにインポートされ、接続関数が出力されます。したがって、そのファイルは明確にインポートされています。
「レンダリングしません」と定義します。ページに要素がありますか？または、店舗が要素に渡されていないことを意味しますか？ – shennan
@スンナン - 店舗が要素に渡されていないようです。したがって、mapStateToProps関数は状態オブジェクトを取得し、書籍propsのリストをbookListコンテナに返します。しかし、それは起こっていないようで、mapStateToPropsの中からconsole.log（state）を呼び出すと、出力が得られません。 –
@ ZaidHumayun return文の前にrenderListにconsole.log（this.props.books）を置いたときの結果は？ – Grajek