Блог

Главная - Вопросы по программированию - Я не понимаю, почему мой компонент вызывается дважды в этом примере

Я не понимаю, почему мой компонент вызывается дважды в этом примере

#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, я не смог воспроизвести вашу проблему, она вернулась только один раз.

Метки: ,