Javascript 反应：如何使用相同的onClick和不同的drop渲染相同的组件

我尝试使用React组件来呈现.json中的所有项目。这是我目前的代码：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      load: '',
      projectInfo:{
        "projects":[]
      }
    }
  }

  getProjectInfo(){
    $.ajax({
      url:'http://localhost:3000/projectInfo.json',
      dataType:'json',
      cache: false,
      success: function(data){
        this.setState({projectInfo: data});
      }.bind(this),
      error: function(xhr, status, err){
        console.log(err);
        alert(err);
      }
    });
  }

  componentDidMount(){
    this.getProjectInfo();
  }

  handleClick = (value) => {
    this.setState({load: value});
  }

  display(app){
    if(app == 'bmi') {
      return <Bmi />
    }
    if (app === 'js') {
      return <Js />
    }
    else return "";
  }

  render() {
    if(this.state.projectInfo){
      var projects = this.state.projectInfo.projects.map(function(project){
        return (<Project id={project.id}
                         projectName={project.name}
                         projectDescription={project.description}
                         imgAddress={project.imgAddress}
                         onClick={this.handleClick}/>)
      })
    }
    return (
      <div className="App">

        <div className="App-header">

          <h2>React Test</h2>

        </div>
        <div className="box">
          {projects}

        </div>
        <div className={this.state.load}>
          {this.display(this.state.load)}
        </div>

      </div>

    );
  }
}

export default App;

我在onClick中遇到了问题，得到了TypeError：无法读取未定义的属性'handleClick'。我认为问题在于，当我使用{this.handleClick}时，“this”指的是传递给函数的“project”，但我不确定如何绕过它

当我手动列出要渲染的所有项目组件时，这是按预期工作的。

在跳转到映射之前，将This.handleClick保存到一个变量

---

您没有为此上下文绑定映射，但是由于您使用=>表示法，因此可以使用自动绑定，例如

  var projects = this.state.projectInfo.projects.map(project => {
      return (<Project id={project.id}
                     projectName={project.name}
                     projectDescription={project.description}
                     imgAddress={project.imgAddress}
                     onClick={this.handleClick}/>)
  })

您需要绑定到正确的上下文。您可以这样做

或

在构造函数中

---

在构造函数内部，将其绑定到函数

this.handleClick = this.handleClick.bind(this);

---

嗨，你对上下文有问题。我的建议是创建适当的函数来处理单击

handleClick(value){
    this.setState({load: value});
 }

然后将lambda函数添加到：

if(this.state.projectInfo){
      var projects = this.state.projectInfo.projects.map((project) => {
        return (<Project id={project.id}
                         projectName={project.name}
                         projectDescription={project.description}
                         imgAddress={project.imgAddress}
                         onClick={()=>{this.handleClick(project.id);}}/>)
      })
    }

---

我不确定您需要传递什么样的参数来处理单击功能，但我猜这是project。id

您需要绑定map函数，请检查此项。您是否尝试了我在上面的评论中发布的解决方案。我相信它会解决这个问题。他们两个都能工作，谢谢。他已经用arrow:handleClick=value=>{..}@Axnyff的解决方案绑定了handleClick来阻止这个错误。然而，正如Murat K.的回答一样，点击组件并没有任何作用。可能是从我最初的设置开始的，分别呈现组件。我想传递被单击的组件的id，以呈现下面正确的内容，您还碰巧知道是否有修复方法谢谢：d这已经可以阻止错误，尽管单击组件不再起任何作用。可能是从我最初的设置开始的，分别呈现组件。我想传递被单击的组件的id，以呈现下面正确的内容，您是否也碰巧知道是否有修复方法？这似乎不起作用，我仍然收到相同的错误。我以为对handleClick使用=>已经绑定了它？在尝试这些时，我似乎仍然收到相同的错误。不过，我会继续查看它，我可能错过了一些我认为对handleClick使用=>已经绑定了函数的东西？

constructor(props){
   super(props);
   this.state = {
     load: '',
     projectInfo:{
      "projects":[]
     }
   };
   this.handleClick = this.handleClick.bind(this);

}

this.handleClick = this.handleClick.bind(this);

handleClick(value){
    this.setState({load: value});
 }

if(this.state.projectInfo){
      var projects = this.state.projectInfo.projects.map((project) => {
        return (<Project id={project.id}
                         projectName={project.name}
                         projectDescription={project.description}
                         imgAddress={project.imgAddress}
                         onClick={()=>{this.handleClick(project.id);}}/>)
      })
    }