使用ReactJS

Question

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

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

app.jsx

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

map.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时，地图将使用默认值（中心位置和缩放）重置。状态正在将optionsMap键更新为。我不明白为什么。

Answer 1

您的地图使用optionsMap的默认值进行更新的原因是因为对setState的任何调用都会导致组件重新呈现（除非在shouldComponentUpdate中定义了行为否则说。反过来，这将重新渲染您的Google地图元素，并再次传递optionsMap中的信息，该信息自初始渲染后未发生变化。

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