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

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

0 голосов
/ 16 апреля 2019

Я следовал полному руководству по реагированию на натив и редуксу на Удеми, и есть эта часть, где, несмотря на то, что я последовал за мишенью. Мой компонент 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 Ответ

1 голос
/ 17 апреля 2019

У меня была похожая проблема с одним из моих проектов.

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

...