为什么我的反应组件没有随着状态更新而更新？

Question

我有一个我构建的地图应用程序，它需要一些地图图标在按下按钮后出现/消失，但是当我从它的父组件传入一个新的运动属性时，我不知道如何设置它来重新渲染组件:

父加载组件：

 <SimpleMap sports=[default value and future values go here] />

简单地图组件（已简化）：

 constructor(props) {
  (props);
  this.state = {
    events: [{venue: {lat: 2, lon: 1}}],
    sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"]
  };
};

componentWillReceiveProps (nextProps) {
  this.setState({events: [{venue: {lat: 2, lon: 1}}],
                  sports: nextProps.sports});
  console.log(nextProps.sports);
}

static defaultProps = {
  center: {lat: 36.160338, lng: -86.778780},
  zoom: 12,
  sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"],
};

makeMapEvents (insertProps) {
  fetch("./json/meetup.json").then((response) => {
    return response.json()
  }).then((response) => {
    /* eventually returns new events object based on insertProps */
    this.setState({events: response});
  }
};

componentDidMount () {
  this.makeMapEvents(this.state.sports);
  console.log("mounted", this.state.sports);
}

最终在这里结束以映射来自状态的事件：

 <GoogleMap>
  {this.state.events.map((result) => {
     return (<Marker key={counter++} lat={result.venue.lat} lng={result.venue.lon}
                sport={this.props.sport} data={result}/>);
  })}
</GoogleMap>

原文由 deek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React ES6 类不会自动绑定 this 默认情况下为非 React 基础成员方法。因此，函数中 this 的上下文 makeMapEvents 未正确绑定。有两种方法可以解决这个问题：

通过 ES7 属性初始化器：

 makeMapEvents = (insertProps) => {
  fetch("./json/meetup.json").then((response) => {
    return response.json()
  }).then((response) => {
    /* eventually returns new events object based on insertProps */
    this.setState({events: response});
  })
};

通过构造函数中的绑定：

 constructor(props) {
  (props);
  this.state = {
    events: [{venue: {lat: 2, lon: 1}}],
    sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"]
  };

  this.makeMapEvents = this.makeMapEvents.bind(this) // << important line

}

原文由 David Xu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

.then((response) => {
    this.setState({events: resp});
}

您输入参数 response 然后尝试使用 resp 这不是您想要的变量。

原文由 krs 发布，翻译遵循 CC BY-SA 3.0 许可协议