无法在ReClick上显示React Component

Question

我有一个services组件，我想从中调用serviceData组件

问题是，在第一次点击其中一个服务名称时，我得到Na这是第二次点击ServiceData中空值的占位符值我收到错误说明......

Cannot read property 'params' of undefined

有些东西在逃避我，我无法理解它。

富勒代码：https://paste.ee/p/rKNrT

class Services extends Component {
  constructor(props) {
    super(props);
    this.fetchData = this.fetchData.bind(this);
    this.state = {
      services: [],
      servicename: null,
    };
  }
  fetchData(servicename){
    this.setState(() => (
      {servicename: servicename}
    ));

    componentWillReceiveProps() {
      var { clustername } = this.props.match.params;
      if (clustername && typeof clustername !== 'undefined'){
      var u = `https://validapi.com/dev/clusters/${clustername}/services/`
    }
    console.log(u);
    axios.get(u)
    .then( results => {
      let services = results.data.data;
      this.setState(() => ({ services: services }));
      console.log(this.state.services);
    })
    render() {
    const services = this.state.services;
    return (
      <div className="ServiceList">
        <Row>
          <Col sm="3">
        <ListGroup>
      {
        services.map((service) => { return (
          <ListGroupItem key={service + 10} onClick={ () => {this.fetchData(service)} }>{service}</ListGroupItem>) })
      }
    </ListGroup>
  </Col>
          <Col sm="auto">
            {
this.state.servicename ? <ServiceData clustername={this.props.clustername} servicename={this.state.servicename} />: <span>nada</span>
              }

  </Col>

  </Row>
    </div>
    )

  }
}

export default withRouter(Services);