javascript - State is not defined - Stack Overflow

admin管理员组

文章数量:1187854

I'm new to react and I'm getting an error for the state and method:

./src/App.js
Line 5: 'state' is not defined no-undef
Line 8: 'inputchangehandler' is not defined no-undef

This is my code until now:

import React from 'react';
import './App.css';

function App() {
state = {
  userInput: ''
}
 inputchangehandler = (event) => {
    this.setState = ({
      userInput: event.target.value
    })
  }
  return (
    <div className="App">
      <input type="text" name="name" 
      onChange={this.inputchangehandler} 
      value = {this.state.userInput}/>
    </div>
  );
}

export default App;

I'm new to react and I'm getting an error for the state and method:

./src/App.js
Line 5: 'state' is not defined no-undef
Line 8: 'inputchangehandler' is not defined no-undef

This is my code until now:

import React from 'react';
import './App.css';

function App() {
state = {
  userInput: ''
}
 inputchangehandler = (event) => {
    this.setState = ({
      userInput: event.target.value
    })
  }
  return (
    <div className="App">
      <input type="text" name="name" 
      onChange={this.inputchangehandler} 
      value = {this.state.userInput}/>
    </div>
  );
}

export default App;

• javascript
• reactjs
• error-handling

Share Improve this question Follow edited Aug 12, 2021 at 11:02 Abhirajshri Winsome 17511 silver badge1616 bronze badges asked Aug 6, 2019 at 9:35 Gobika KrishnaGobika Krishna 6922 gold badges22 silver badges66 bronze badges

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 23

In react there are 2 types of components.

1. Functional Components(like you used)
2. Class Components

Functional Components are stateless(in older versions, you can use hooks now) components. So if you want to directly use state you should change your components to class based component like this:

import React, { Component} from 'react';
import './App.css';

class App extends Component {
state = {
  userInput: ''
}
 inputchangehandler = (event) => {
    this.setState = ({
      userInput: event.target.value
    })
  }
render(){
return (
        <div className="App">
          <input type="text" name="name" 
          onChange={this.inputchangehandler} 
          value = {this.state.userInput}/>
        </div>
      );
    }
}


export default App;

Functional component don't have state, form React 16.8 we have Hooks.

You should use useState hook for state.

import React, {useState} from 'react';


const [userInput, setUserInput] = useState('')

Usage,

<input type="text" name="name" 
      onChange={inputchangehandler} 
      value = {userInput}/>

inputchangehandler function should be,

const inputchangehandler = (event) => {
    setUserInput(event.target.value)
}

Demo

Note: Functional component don't have access to this.

You have created functional component which does not have state. Define App as class component like below :

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userInput: ''
        }
    }

    inputchangehandler = (event) => {
        this.setState = ({
            userInput: event.target.value
        })
    }

    render() {
        return (
            <div className="App">
                <input type="text" name="name"
                    onChange={this.inputchangehandler}
                    value={this.state.userInput} />
            </div>
        );
    }
}

export default App;

You need to define state in your class's constructor like below:

constructor(props) {
    super(props);
    this.state = {
        userInput: ''
    }
}

Declaring your component as a function you don't have state. Try converting it in class component or in a function using Hooks according to react documentation.

If you are using React version greater than 16.8 then you can use the useState hook.

import React from 'react';
import './App.css';


function App() {
const [userInput, setUserInput] = useState(0);

 inputchangehandler = (event) => {
    setUserInput(event.target.value)
  }
  return (
    <div className="App">
      <input type="text" name="name" 
      onChange={this.inputchangehandler} 
      value = {userInput}/>
    </div>
  );
}

export default App;

Refer: https://reactjs.org/docs/hooks-state.html

If you are using an older version then you will need to convert it to a React.Component

If you don't want to write a class component, you should use hooks, so your code will be like this:

import React, { useState } from 'react';
import './App.css';

function App() {

const [userInput, setUserInput] = useState(undefined);


 inputchangehandler = (event) => {
    setUserInput(event.target.value)
 }
  return (
    <div className="App">
      <input type="text" name="name" 
      onChange={this.inputchangehandler} 
      value = {userInput}/>
    </div>
  );
}

export default App;

i was on React version 17 this worked for me for state undefined error: Adding example from React official docs:

class Clock extends React.Component {   constructor(props) {
    super(props);
    this.state = {date: new Date()};   }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );   } }

Assuming you're working with a class component rather than a functional component (as mentioned in other answers), the error state is not defined can occur if you forgot to prefix it with this..

Instead of:

myFunction() {
  let myVariable = state.myStateKey;
  // ...
}

Do:

myFunction() {
  let myVariable = this.state.myStateKey;
  // ...
}

本文标签： javascriptState is not definedStack Overflow