ShouldComponentUpdate никогда не вызывается в дочерних компонентах - PullRequest
Новая
       6

ShouldComponentUpdate никогда не вызывается в дочерних компонентах

0 голосов
/ 25 мая 2018

У меня есть два компонента.Один из них является родительским (интеллектуальный компонент, который подключен к редуксу), а другой - дочерним компонентом, отображаемым в итерации массива.

Всякий раз, когда какое-либо действие избыточности отправляется из дочернего компонента, состояние в хранилище изменяется и целикомсписок элементов перерисован, но я хочу только визуализировать дочерний элемент, фактическое состояние которого было изменено.Как и в массиве местоположений, я хочу показать загрузчик в определенном месте, и объект в массиве хорошо обновляется, но почему beforeComponentUpdate недоступен в child, чтобы я мог решить, должен ли он отображаться или нет.

Родительский компонент 

import React                        from 'react';
import { connect }                  from 'react-redux';
import { createStructuredSelector } from 'reselect';

class Locations extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return this.props.locations.map((location) => 
    <Location
      toggleLocationStatusInfo={this.props.toggleLocationStatusInfo}
      location={location} />)
  }
}

const mapDispatchToProps = (dispatch) => ({
  fetchLocations: (data) => dispatch(actions.fetchLocations(data)),
  toggleLocationStatusInfo: dispatch(actions.toggleLocationStatusInfo()),
});

const mapStateToProps = createStructuredSelector({
  locations: selectors.getLocations(),
});

export default connect(mapStateToProps, mapDispatchToProps)(Locations);

Дочерний компонент 

import React from 'react';
class Location extends React.Component {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate() {
    // THIS METHOD IS NEVER CALLED EVEN THE TOGGLE ACTION IS
    // DISPATCHCED AND REDUX STATE IS CHANGED. IT IS CALLED FINE FINE
    // PARENT (Locations) COMPONENT BUT NOT HERE
  }

  render() {
    // render this.props.location content here
    // One of my anchor calls onClick={this.props.toggleLocationStatusInfo}
  }
}

Location.propTypes = {
  location: React.PropTypes.object
  toggleLocationStatusInfo: React.PropTypes.func,
}

Как я могу узнать, почему shouldComponentUpdate не вызывается у детей?

Ответы [ 2 ]

0 голосов
/ 06 июля 2019

Та же проблема возникает, если вы используете Маршрут от реакции-маршрутизатора и передаете встроенную функцию вместо компонента, например так:

ВЫПУСК 

<Route
  path="/decrement"
  component={() => (
    <Decrement decrementBy={decrementBy} isLoading={isLoading} />
  )}
/>

РЕШЕНИЕ 

<Route
  path="/decrement"
  render={() => (
    <Decrement decrementBy={decrementBy} isLoading={isLoading} />
  )}
/>
0 голосов
/ 25 мая 2018

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

После добавления ключевого свойства в Location он работал нормально.

...