在组件类中使用上下文

Question

当上下文更改时，我的组件无法重新呈现。

import React from 'react'
import styled from 'styled-components'

import { Data } from '../../data'

const SelectElement = styled('div')`
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 0px;
    cursor: pointer;

    .selection_dot {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 1px solid grey;
        margin-right: 10px;
        padding: 2px;
        box-sizing: border-box;
    }

    .activeSelection {
        .active_color {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: #6daed6;
        }
    }

    .selection_name {
        width: calc(100% - 30px);
        overflow: hidden;
    }
`

interface Props {
    name: string
    type?: string
    code?: string
    clickEvent?: Function
    active?: boolean
    activeFeatures?: string[]
}

interface State {
    active: boolean
}

export default class Select extends React.PureComponent<Props, State> {
    constructor(props: any) {
        super(props)

        this.state = {
            active: false,
        }
        this.renderActiveMarker = this.renderActiveMarker.bind(this)
    }

    renderActiveMarker(featureList) {
        if (featureList) {
            if (featureList.indexOf(this.props.code)) {
                return <div className="active_color" />
            }
        }
    }

    render() {
        let returnActiveSelection = data => {
            if (
                data.indexOf(this.props.type) > -1 &&
                data.indexOf(this.props.code) > -1
            ) {
                this.setState({
                    active: true,
                })
                return 'selection_dot activeSelection'
            } else {
                this.setState({
                    active: false,
                })
                return 'selection_dot'
            }
        }
        return (
            <Data.Consumer>
                {context => (
                    <SelectElement
                        data-feature-type={this.props.type}
                        data-feature-code={this.props.code}
                        onClick={() => {
                            this.props.clickEvent()
                        }}
                    >
                        <div
                            className={returnActiveSelection(
                                context.state.opts.features,
                            )}
                        >
                            {this.renderActiveMarker(
                                context.state.opts.features,
                            )}
                        </div>
                        <p className="selection_name">{this.props.name}</p>
                    </SelectElement>
                )}
            </Data.Consumer>
        )
    }
}

如您所见，此组件从Context API Provider获取一些数据，然后在选择div中呈现active_color标记。由于某种原因，当上下文更新时，该组件不会重新呈现。我想我已经看了太久了，很容易爆炸，但我看不到。

请让我知道我在这里做错了。

干杯