为什么response在dispatch后不能正确删除组件？

Question

我在写一个小的dataviz应用，我的图大部分都能用，所以我去做了一个关于 React 部分，连接一个商店，所以我可以选择区域显示在我的图形上。

然而，当选择和不选择一个区域时，组件之前的状态并没有被破坏，所以新的区域几乎没有被绘制。

描述：顶部组件是指在选择和取消选择一个区域时出现的组件。

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 /> (来源)

当新区域未被选择时，发送事件。

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)

问题

为什么旧州的组件还在？如何销毁它？

相关内容

• 现场演示 (今后可能会修正)
• 提交时的代码库
• D3js：使用画笔选择时，如何更新里面的子代？