#reactjs #react-native #react-redux
#reactjs #react-native #реагировать-redux
Вопрос:
Я следил за полным руководством по react native и redux по Udemy, и есть эта часть, где, несмотря на то, что я следовал до конца. Мой компонент LibraryList по-прежнему вызывается дважды. В чем может быть проблема?
LibraryList.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class LibraryList extends Component {
render() {
console.log(this.props);
return;
}
}
function mapStateToProps(state) {
return {
libraries: state.libraries
};
}
export default connect(mapStateToProps)(LibraryList);
App.js
import React from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common';
import LibraryList from './components/LibraryList';
const App = () => {
return (
<Provider store={createStore(reducers)}>
<View>
<Header headerText='Tech Stack' />
<LibraryList />
</View>
</Provider>
);
};
export default App;
LibraryReducer.js
import data from './LibraryList.json';
export default () => data;
index.js внутренняя папка редукторов
import { combineReducers } from 'redux';
import LibraryReducer from './LibraryReducer';
export default combineReducers({
libraries: LibraryReducer
});
LibraryList.json
[
{"id": 0,
"title": "Webpack",
"description": "Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand."
},
....
]
Ожидаемый результат: console.log(this.props) запускается один раз и возвращает библиотеки
Фактический результат: он выполняется дважды
Комментарии:
1. интересно. вы видели, что ваши реквизиты были одинаковыми в оба раза?
2. Я думаю, что это может быть полезно для отладки: github.com/markerikson/redux-ecosystem-links/blob/master /…
Ответ №1:
У меня была похожая проблема с одним из моих проектов.
LibraryList.js
Вместо расширения Component
использования PureComponent
. PureComponents не будет вызывать функцию рендеринга, если состояние и реквизиты не изменились, поскольку она интегрирует простую проверку в shouldComponentUpdate
метод. https://reactjs.org/docs/react-api.html#reactpurecomponent
Вы всегда можете реализовать свой собственный shouldComponentUpdate
метод с помощью React Component
вместо использования PureComponent
. Вам нужно быть осторожным при реализации shouldComponentUpdate
метода с помощью Redux, вы можете создать больше ошибок. https://redux.js.org/faq/react-redux#why-isn-t-my-component-re-rendering-or-my-mapstatetoprops-running
Когда я попробовал ваш пример на Android и iOS, я не смог воспроизвести вашу проблему, она вернулась только один раз.