Компонент React-redux не рендерится при смене реквизита магазина

Question

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

Вот мой компонент

import { fetchLocations } from 'state/locations/actions';

class Event extends React.Component {

  componentDidMount() {
    this.props.fetchLocations();
  }

  render() {
    const { locations } = this.props;

    return <span>{locations.map((l) => {return <span>{l}</span>;})}</span>;
  }
}

const mapStateToProps = (state) => ({
  locations: state.locations
})

export default connect(                                                                                                                                               
  mapStateToProps,                                                                                                                                                    
  { fetchLocations },                                                                                                                                                 
)(Event); 

Вот мой файл действий локаций

export const fetchLocations = () = (dispatch) => {
  axios.get('/api/locations')
  .then(response => {
    const locations = response.data;

    dispatch({ type: FETCH_LOCATIONS_SUCCESS, payload: locations });
  });
}

И мой редуктор сущностей

function entities(state = { locations: {} }, action) {
  switch (action.type) {
    case FETCH_LOCATIONS_SUCCESS:
      return Object.assign({}, state, {
        locations: action.payload
      })
    default:
      return state
  }
}

После этого мой Event компонент должен выполнить повторную визуализацию.Это не так.При использовании Chrome Extension для инструментов разработчика я вижу, что местоположения действительно существуют как props, но они не отображаются в пользовательском интерфейсе.

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

Похоже, все работает хорошо, за исключением того, что повторный рендеринг не запускается.componentDidUpdate никогда не запускается.

Если я вручную произнесу от setTimeout до forceUpdate через произвольную секунду, они обнаружатся.

Почему мой компонент не выполняет повторную визуализацию?

Answer 1

Пожалуйста, попробуйте добавить ключевую опору в элемент span метода render.locations.map((l,key)=> <span key={key} >{l} </span>