Question

在这里反应本机初学者，当我按自定义组件时，我试图制作一个运行功能的应用程序，但是当我尝试这样做时，我得到“未定义不是对象（评估'_this2。 setProject.bind'）“错误...

这是我的代码：

constructor(props){

super(props);

projets = [
    {
        "text":"ProjectName",
        "progress":"30",
        "budget":"36000",
        "totalDays":"50",
        "design":"10",
        "integration":"12",
        "dev":"30"
    },

var progress = 0;
var totalDays = 54;
var budget = 24000;

this.state = {
  projets: projets,
  progress: progress,
  totalDays: totalDays,
  budget: budget
}

this.setProject = this.setProject.bind(this);

}

....

  setProject() {
    console.log("test");
  }

  render() {

var projectsArray = [];

return (

.....

    <ScrollView style={{flex: 3, flexDirection: 'column', backgroundColor: '#f5f5f5'}}>

      {this.state.projets.forEach(function(projet, index) {

        projectsArray.push(
            <ItemProjet onPress={() => {this.setProject.bind(this)}} selected={false} key={index} progress={projet.progress} budget={projet.budget} totalDays={parseInt(projet.design)+parseInt(projet.integration)+parseInt(projet.dev)} text={projet.text} design={projet.design} integration={projet.integration} dev={projet.dev}/>
        );

      })}

      {projectsArray}

    </ScrollView>

Answer 1

您的代码有两个问题。

首先：-您不需要通过3种方式绑定函数，从而使代码变得多余。因此，您只需拨打onPress={this.setProject}

第二步：-您可以使用forEach函数，而不必使用map，推入数组然后渲染它， em>创建一个新数组，并对该数组中的每个元素调用提供的函数。

因此您可以

   {this.state.projets.map((projet, index) => ( //... Use arrow function here to bind this parameter

     <ItemProjet key={index} onPress={this.setProject} selected={false}
       key={index} progress={projet.progress} budget={projet.budget}
       totalDays={parseInt(projet.design)+parseInt(projet.integration)+parseInt(projet.dev)}
       text={projet.text} design={projet.design} integration={projet.integration} dev={projet.dev}/>
    ))}

Answer 2

您应该这样声明您的函数（自动绑定到您的类）：

setProject = () => {
  console.log("test");
}

然后像这样使用它：

<ItemProjet onPress={this.setProject} //other props />

Answer 3

您可以使用ES6 arrow functions来解决此特定用例。

对于您而言，可以在组件中以以下方式声明signature函数：

setProject()

此后，您只需键入以下内容即可调用该函数：

setProject = () => { console.log('test'); };或this.setProject()

undefined不是对象（评估'_this2.setProject.bind'）onPress

3 个答案: