Почему реакция не удаляет компонент после отправки? - PullRequest
Новая
       82

Почему реакция не удаляет компонент после отправки?

0 голосов
/ 02 мая 2020

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

Тем не менее, при выборе / отмене выбора региона предыдущее состояние компонента не разрушается, поэтому новое, так же мало места для рисования.

component redrawn without removing old state Описание:

  1. Верхний компонент - это тот, который появляется при загрузке приложения
  2. Нижний компонент - это тот, который появляется при изменении состояния

Я ожидал, что верхний компонент исчезнет при изменении состояния.

<VisibleEvents /> компонент контейнера (источник)

Извлечение данных и подключение компонента <Timeline> к хранилищу Redux 

# … import and helpers

const timelineEvents = buildD3Data(data as TimelineEvents)

const getVisibleEvents = (events: TimelineEvents, regions: Regions) => {
  const visibileEvents = getEvents(
    timelineEvents.sort(sortByRegion),
    regionsWithEvents
  )
  return visibileEvents
}

const mapStateToProps = (state: RootState) => ({
  regions: getSelectedRegions(state),
  events: getVisibleEvents(timelineEvents, getSelectedRegions(state)),
})
const connector = connect(mapStateToProps, {})

export default connector(Timeline)

<Timeline /> Компонент (источник) 

import React, { useEffect, useRef } from 'react'
import { Regions } from '../types/region'
import { TimelineEvents } from '../types/timelineEvent'
import drawGraph from './drawGraph'

interface TimelineProps {
  events: TimelineEvents
  regions: Regions
}

const Timeline = ({ events, regions }: TimelineProps) => {
  const graph = useRef(null)

  useEffect(() => drawGraph(graph, regions, events))

  return <div ref={graph} data-testid='chart'></div>
}

export default Timeline

<RegionPicker /> (источник)

Событие отправки, когда новый регион un / selected: 

const mapStateToProps = (state) => ({
  regions: getSelectedRegions(state),
})
const mapDispatchToProps = (dispatch) => {
  return {
    selectRegion: (region) => dispatch(selectRegion(region)),
    unSelectRegion: (region) => dispatch(unSelectRegion(region)),
  }
}
const connector = connect(mapStateToProps, mapDispatchToProps)

export default connector(RegionPicker)

Вопрос

Почему компонент старого состояния все еще присутствует? Как мне его уничтожить?

Связано

...