Reactjs

Question

我正在尝试使用条件渲染来渲染 class 组件。 class 组件的状态值默认设置为 false。在 class 中，一个名为 start() 的函数执行一些操作，并根据结果调用具有 setState() 的函数 verifyTheIdentity()。但是我无法从 start().

调用 verifyTheIdentity()

import React from "react";
import * as faceapi from "face-api.js";
import web3 from "../web3";

class recognize extends React.Component {
  constructor(props) {
    super();
    this.state = {
      verified: false
    }
    this.verifyTheIdentity = this.verifyTheIdentity.bind(this);
    // this.start = this.start.bind(this);
  }
  verifyTheIdentity() {
    this.setState(prevState => {
      return {
        verified: true
      }
    })
  }
  async start() {
    ///////////////////CODE FOR FACE RECOGNITION///////////////////////////////
    let name = result.toString();
    console.log(name);
    const pattern = new RegExp(/^unknown/)
    console.log(pattern.test(name))
    if (pattern.test(name) === false) {
      document.getElementById("verifier").disabled = false;
      document.getElementById("verifier").onClick = this.verifyTheIdentity;    //This is where I am going wrong.
    }
    else
      document.getElementById("verifier").disabled = true;

  })
})
    }
render() {
  return (
    <div>
      {this.state.verified == false ? <div><br /><br /><br /><br />
        <input type="file" id="imageUpload" /><br />
        <button disabled id="verifier" >Verify</button></div> :
        <div><br /><br /><br /><br /><p>Verified</p></div>}
    </div>

  )
}
}
export default recognize;

这是我得到的错误。

Unhandled Rejection (TypeError): Cannot read property
'verifyTheIdentity' of undefined.

Answer 1

首先，如果你使用箭头函数，你根本不需要绑定。

    constructor(props) {
        super();
        this.state = {
            verified: false 
        }
    }
    verifyTheIdentity = () => {
        //code
    }   
    start = async () => {
       // code 
    }

试试这个，它应该有效。

或删除注释代码，添加构造函数（从行中删除 //）

this.start = this.start.bind(this);

Answer 2

你可以用下面一行替换这一行

document.getElementById("verifier").onClick = this.verifyTheIdentity;

像这样

 document.getElementById("verifier").onClick = this.verifyTheIdentity();

Answer 3

此问题与 Javascript 语法违规 -

有关

"Calling a function without parenthesis"

要解决此问题，请使用正确的语法调用函数 verifyTheIdentity()：

document.getElementById("verifier").onClick = this.verifyTheIdentity();

或者，将函数分配给变量并调用它：

const test = verifyTheIdentity() {
        this.setState(prevState => {
            return {
                verified: true
            }
        }) 
    };
document.getElementById("verifier").onClick = this.test ;

为了便于理解，请看示例：

function Test(){
   alert(1);
}  

//Test;    //It won't work
Test();  // It will work

Reactjs - 无法读取未定义的属性

Reactjs - Cannot read the property of undefined

javascript

setstate

Reactjs - 无法读取未定义的 属性

Reactjs - Cannot read the property of undefined

javascript

setstate

reactjs

Reactjs - 无法读取未定义的属性