javascript - 使用 ReactJS 在特定键上设置状态

Question

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

我使用 tomchentw 的 react-google-maps 组件。我在我的 App 状态中设置了 map 的选项(然后我通过 props 将它传递给 GoogleMap 组件)。

app.jsx

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

ma​​p.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);
    }

当我调用在 app.jsx 中定义的 updateVarOptions() 函数(当我移动 map 时)时，我更新了非常具体的键变量的状态。

app.jsx

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

所以，我只更新状态上的 variables 键，但是当我执行 setState 时， map 会重置为默认值(中心位置和缩放)。状态正在将 optionsMap 键更新为。我不明白为什么。

Answer 1

您的 map 使用 optionsMap 中的默认值更新的原因是因为对 setState 的任何调用都会导致组件重新呈现(除非定义了行为在 shouldComponentUpdate 中另有说明)。反过来，这将重新呈现您的 Google map 元素并再次传递来自 optionsMap 的信息，该信息自初始呈现以来没有改变。

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