javascript - react : Update child with parent state change

Question

我很确定我在这里遗漏了一些非常明显的东西，但似乎无法让它发挥作用:

我有一个调用两个子组件的父组件。

家长

<PropertyCard model={property} onMouseOver={this.handlePropertyCardHover.bind(this, property)} />
<Map markers={places} options={mapOptions} activeRef={this.state.hoveredCard} />

当我将鼠标悬停在 PropertyCard 上时，会调用一个函数来更新父项中的 hoveredCard 状态。

家长

handlePropertyCardHover = (property) => {
    this.state.hoveredCard = property.id;
}

这部分有效，我可以看到父状态正在更新，但当它传递给第二个子状态时，Map没有任何更新。

map

<h1>{this.props.activeRef}</h1>

我错过了什么？

Answer 1

当你想改变你的状态时，你必须使用this.setState。

this.setState({hoveredCard : property.id})

而不是

this.state.hoveredCard = property.id;