当我在地图内部设置onClick时发送未定义而不是event.target.dataset.component

Question

当我尝试在地图函数中为onClick函数设置此changeView时，它将返回undefined而不是data-component="CaseForm"。这在地图外有效，但由于某些原因在这里不起作用。

这是我的changeView函数

changeView(event){
  //alert(event.target.dataset.component);
  let componentToDisplay = event.target.dataset.component;
  alert(componentToDisplay);
  this.setState(
      {
          componentToDisplay: componentToDisplay
      }
  );}

我是这样渲染的

 {this.state.componentToDisplay === "MainPage" && <MainPage  changeView={this.changeView}/>}

这是我遇到问题的组件

    import React, {Component} from 'react';
import MainPageCrime from './MainPageCrime';
class MainPage extends Component{

    render(){
      let crimeJSON = {
          crimes: [
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"},
              { victim: "testV", crime: "testC", crimeScene: "testCS", solved: "No"}
          ]
      };


      let crimeRows =  crimeJSON.crimes.map(function(crime, i) {
        return (
          <tr data-component="CaseForm" onClick={this.props.changeView} key={"crime_" + i}>
            <td>{crime.victim}</td>
            <td>{crime.crime}</td>
            <td>{crime.crimeScene}</td>
            <td>{crime.solved}</td>
          </tr>

        )
}, this)




        return(

          <table className="table table-hover mb-0">
            <thead>
              <tr>
                <th>Offer</th>
                <th>Lovbrudd</th>
                <th>Åsted</th>
                <th>Løst</th>
              </tr>
            </thead>

                  <tbody>
                      {crimeRows}
                  </tbody>

          </table>

)
}
}

export default MainPage;

在此先感谢您能获得的任何帮助。