Реактивный компонент (GeoJSON) не перерисовывается при изменении состояния - PullRequest
Новая
       18

Реактивный компонент (GeoJSON) не перерисовывается при изменении состояния

0 голосов
/ 03 января 2019

Я использую библиотеку реагирующих листовок, чтобы создать простой геопортал, в котором пользователь может изменять цвет, видимость и прозрачность векторных слоев. Я взял ползунки, чтобы изменить цвет из коллекции цветов React. Проблема в том, что после изменения стиля в состоянии моего компонента с GeoJSON мой векторный слой не меняет свой цвет - он не рендерится снова.

Вот мой компонент со слоем GeoJSON (может быть несколько ненужных элементов, возникших в результате неоднократных попыток решить проблему): 

import React from 'react';
import PropTypes from 'prop-types';
import { GeoJSON } from 'react-leaflet';

class VectorLayers extends React.Component{
    constructor(props){
        super(props);
        this.state={
            key: this.props.layer.name,
            data: this.props.layer,
            style: {
                weight: 0,
                fillColor: this.props.color,
                fillOpacity: this.props.color,
                styleChanged: false
            },
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if(this.state.style !== prevState.style) {
            let newStatus = !this.state.style.styleChanged
            this.setState({newStatus})
        }
    }

    static getDerivedStateFromProps(nextProps, prevState){
        if(nextProps.color!==prevState.style.fillColor){
            return {style: {
                weight: 0,
                fillColor : nextProps.color,
                fillOpacity : nextProps.color
            }}
        }
        else return null;
    }
    render(){
        return (
            <GeoJSON
                key={ this.state.key }
                data={ this.state.data }
                style={ this.state.style }
            />
        );
    }
}

VectorLayers.propTypes = {
    layer: PropTypes.shape().isRequired,
    color: PropTypes.string.isRequired
};

export default VectorLayers;

А это фрагмент моего кода App.js с опорами для векторного слоя: 

            {
                this.state.layers.map((layer) => ( 
                    this.state.checkboxes[layer.name] && (
                        <VectorLayers
                            key={ layer.name }
                            layer={ layer }
                            color={ this.state.colors[layer.name] }
                        />
                    )
                ))
            }

Функция изменения цвета и компоненты с помощью ползунков работают хорошо, поэтому я не вижу необходимости добавлять их здесь. Буду очень признателен за помощь в поиске решения!

1 Ответ

0 голосов
/ 03 января 2019

Редактировать: изменить свой стиль на функцию, например, так:

style={() => {return ({fillColor: this.state.style.fillColor})}}

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

key={ this.state.key + this.state.style.fillColor }

Также странно, что вы назначаете непрозрачность таким цветом, как fillOpacity: this.props.color,

Разве это не должно быть число от 0 до 1?

...