JIYIK CN >

In the process of React development, we often encounter some errors. Here we look at an error reported in App.js. The error is as follows: App.js:69 Uncaught TypeError: Cannot read properties of undefined (reading 'setState') at onInputChange (App.js:69:1)

Below is the complete code that produces the error

// 调用 clarifai api接口
const app = new Clarifai.App({
    apiKey : 'a2013154seuiasdfdse94302c5bd'
});

class App extends  React.Component {
    constructor () {
        super();
        this.state = {
            input : '',
            imageUrl : '',
        }
    }

    onInputChange(event) {
        this.setState({input: event.target.value})
        console.log('setState input' + this.state.input);
    }

    onButtonSubmit() {
        this.setState({imageUrl: this.state.input});
        app.models.predict(Clarifai.COLOR_MODEL, this.state.input).then(
            function(response) {
                console.log(response);
            },
            function(err) {
                // 这里处理错误
            }
        )
    }
    render(){
        return (
            <div className="App">
                <Particles className="particles" id="tsparticles" options={particlesOptions} />
                <Navigation />
                <Logo />
                <Rank />
                <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit = {this.onButtonSubmit} />
                <FaceRecognition imageUrl = {this.state.imageUrl} />
            </div>
        );
    }
}

export default App;

There are few solutions to this problem.

As for why this happens, it is because the arrow method is not used in the above code. Here we have two solutions

1. We need to bind the handler.

   constructor() {
   ...code
   this.onInputChange = this.onInputChange.bind(this)
   this.onButtonSubmit = this.onInputChange.bind(this)
   }
   

2. Change the method to arrow type (ES6 syntax).

   onInputChange = (event) => {
   this.setState({input: event.target.value})
   console.log('setState input' + this.state.input);
   }
   onButtonSubmit = () => {
   this.setState({imageUrl: this.state.input});
    app.models.predict(Clarifai.COLOR_MODEL, this.state.input).then(
        function(response) {
            console.log(response);
        },
        function(err) {
            // 这里处理错误
        }
    )
   }
   

We can choose any of the above two methods. Excluding the respective environmental factors, the above error can be solved.