React 组件 (GeoJSON) 不会在状态更改时重新渲染

Question

我使用 react-leaflet 库创建了一个简单的地理门户，用户可以在其中更改矢量图层的颜色、可见性和透明度。我使用滑块来更改 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] }
                        />
                    )
                ))
            }

更改颜色的功能和带有滑块的组件效果很好，所以我认为没有必要在这里添加它们。非常感谢您帮助我找到解决方案！

Answer 1

编辑：将您的样式更改为如下函数：

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

~~看起来您使用的密钥从未改变，因此 React 不会费心重新呈现您的 GeoJSON。试试~~

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

此外，您将不透明度指定为 fillOpacity: this.props.color,
之类的颜色也很奇怪

~~不应该是 0 到 1 之间的数字吗？~~

React 组件 (GeoJSON) 不会在状态更改时重新渲染

React component (GeoJSON) not re-rendering on state change

javascript

json

geojson

reactjs

react-leaflet