setState on specific key with ReactJS

Question

我在一些教程中读到，我们可以在setState的参数中传递特定的键，以便只更新特定的元素。但这是我的情况：

我使用tomchentw的react-google-maps组件。我在我的应用程序状态下设置了地图的选项（然后我通过 props 将其传递给 GoogleMap 组件）。

app.jsx

constructor() {
    super();
    //Initial value
    this.state = {
        optionsMap:{
        center: {
            lat: 46.8261444,
            lng: 2.2418121
        },
        zoom: 5
    },
        variables: {}
    }
}

地图.jsx

render() {
        return (
            <GoogleMapLoader
                containerElement={ <div {...this.props} style={{ height: '500px'}}></div> }
                googleMapElement={
                     <GoogleMap
                        ref="googleMap"
                        {...this.props.optionsMap} //biding map options with spread
                        onIdle={this._handleIdle.bind(this)}>
                     </GoogleMap>
                }
            />
        );
    }

    _handleIdle(event) {
        this.props.updateVarsOptions(this.props.optionsMap);
    }

当我调用我的 updateVarOptions（） 函数（当我在 app.jsx 中定义地图时）时，我会更新非常具体的关键变量的状态。

app.jsx

_updateVarsOptions(mapOptions) {
        this.setState({
            variables : mapOptions
        });
}

因此，我只更新状态上的变量键，但是当我执行setState时，地图会使用默认值（中心位置和缩放）重置。状态正在将选项映射键更新到。我不明白为什么。

Answer 1

使用optionsMap中的默认值更新地图的原因是，对setState的任何调用都会导致组件重新渲染（除非shouldComponentUpdate中定义了其他行为）。 反过来，这将重新渲染您的 Google 地图元素并再次传递来自optionsMap的信息，自初始渲染以来未更改。

您可能需要查看shouldComponentUpdate生命周期功能。 此函数在呈现之前立即调用，其返回值将告知组件是否应再次调用其render函数。 默认情况下，它始终返回 true。 您可以修改此行为，以便在variables状态发生更改时不会重新呈现组件。