React:更新具有父状态更改的子项

时间:2016-05-08 04:40:03

标签: javascript reactjs

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

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

PARENT

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

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

PARENT

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

这部分有效,我可以看到父状态在传递给第二个孩子时尚未更新,Map没有更新。

MAP

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

我错过了什么?

1 个答案:

答案 0 :(得分:1)

如果要更改状态,则必须使用this.setState。

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

而不是

this.state.hoveredCard = property.id;