Question

我是新来的反应者。得到以下错误的状态和方法。

./ src / App.js
    第5行：“ state”未定义no-undef
    第8行：未定义“ inputchangehandler” no-undef

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;

Answer 1

功能组件没有状态，从React 16.8开始，我们有Hooks。

您应该使用useState钩子来表示状态。

import React, {useState} from 'react';


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

用法

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

inputchangehandler功能应该是

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

Demo

注意：功能组件无权访问this。

Answer 2

将组件声明为您没有状态的函数。尝试根据react documentation使用Hooks在类组件或函数中对其进行转换。

Answer 3

您已经创建了没有状态的功能组件。将App定义为类组件，如下所示：

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;

Answer 4

react中有两种类型的组件。

功能组件（就像您以前使用的一样）
类组件

功能组件是无状态的（在旧版本中，您现在可以使用hooks）组件。因此，如果您想直接使用state，则应将组件更改为基于类的组件，如下所示：

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;

Answer 5

如果您使用的React版本大于16.8，则可以使用useState钩子。

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;

引用：https://reactjs.org/docs/hooks-state.html

如果您使用的是旧版本，则需要将其转换为React.Component

Answer 6

如果您不想编写类组件，则应使用钩子，这样您的代码将如下所示：

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;

Answer 7

您需要在类的构造函数中定义状态，如下所示：

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

Answer 8

我使用的是 React 版本 17，这对我来说适用于状态未定义错误：添加来自 React 官方文档的示例：

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>
    );   } }

状态未定义

8 个答案: