, also entwickle ich eine kleine Buchhaltungsanwendung in React + Redux. Aber aus irgendeinem Grund wird die Ansicht nicht dargestellt, und ich weiß nicht warum. Der Code verursacht auch keinen Fehler.React und Redux rendern nicht Ansicht
Hier ist die Struktur meiner App.
src
----actions
----components
----App.js
----containers
----bookList.js
----reducers
----book.js
----index.js
--index.js
Hier sind die einzelnen Dateien
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;
Wie ich schon am Anfang erwähnt, absolut keine Fehler nach oben geworfen, und alle console.log Aussagen I Versuch, in der Datei "bookList.js" auszuführen, wird nicht angezeigt.
Diese Datei wird nicht vom Babel-Compiler gelesen.
Wenn ich jedoch die Funktion "Buchliste" protokolliere, die ich von "bookList.js" in "App.js" importiere, wird eine Verbindungsfunktion ausgedruckt. Also wird diese Datei eindeutig importiert.
Definieren Sie "wird nicht rendern". Gibt es Elemente auf der Seite? Oder meinst du, der Laden wird nicht an die Elemente weitergegeben? – shennan
@shennan - Es scheint, als würde der Laden nicht an die Elemente weitergegeben.Daher ruft die Funktion mapStateToProps das state-Objekt ab und gibt die Liste der Bücherrequisiten an den bookList-Container zurück. Dies scheint jedoch nicht zu passieren, und wenn console.log (state) von innerhalb von mapStateToProps, bekomme ich keine Ausgabe. –
@ZaidHumayun Was ist ein Ergebnis, wenn Sie console.log (this.props.books) in renderList vor return statement setzen? – Grajek