React函数-未定义no-undef

Question

尝试编译我的应用程序'handleProgress' is not defined no-undef时出现以下错误。

我在跟踪为什么handleProgress遇到了麻烦。

这是主要的反应成分

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
    };

    this.handleProgress = this.handleProgress.bind(this);
  }

  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);



    handleProgress = () => {
      console.log('hello');
    };

    return (
      <>
        <Progress value={progressValue} />
        <div>
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={this.handleProgress}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Answer 1

您的render方法是错误的，它不应在内部包含handlePress：您正在this调用handlePress ，因此应将其保留在类中。

     class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
    };

    this.handleProgress = this.handleProgress.bind(this);
  }


    handleProgress = () => {
      console.log('hello');
    };


  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);
    return (
      <>
        <Progress value={progressValue} />
        <div>
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={this.handleProgress}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Answer 2

handleProgress不应位于render函数中，请将函数保留在组件本身中，同样，如果您使用的是ES6箭头函数语法，则无需将其绑定在构造函数上。

请参考下面的代码块。

  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        progressValue: 0,
      };
      // no need to use bind in the constructor while using ES6 arrow function. 
      // this.handleProgress = this.handleProgress.bind(this);
    }
    // move ES6 arrow function here. 
    handleProgress = () => {
      console.log('hello');
    };
    render() {
      const { questions } = this.props;
      const { progressValue } = this.state;
      const groupByList = groupBy(questions.questions, 'type');
      const objectToArray = Object.entries(groupByList);

      return (
        <>
          <Progress value={progressValue} />
          <div>
            <ul>
              {questionListItem && questionListItem.length > 0 ?
                (
                  <Wizard
                    onChange={this.handleProgress}
                    initialValues={{ employed: true }}
                    onSubmit={() => {
                      window.alert('Hello');
                    }}
                  >
                    {questionListItem}
                  </Wizard>
                ) : null
              }
            </ul>
          </div>
        </>
      );
    }
  }

Answer 3

如果在render内部使用handleProgress，则必须定义它。

const handleProgress = () => {
      console.log('hello');
    };

如果它在外部渲染和内部组件中，则使用如下：

handleProgress = () => {
      console.log('hello');
    };

如果使用箭头函数，则无需在构造函数中绑定该函数，它将自动绑定此作用域。

Answer 4

试试这个，我已经检查了反应版本16.8.6

我们不需要使用箭头功能绑定到新版本中。 这是绑定参数方法和非参数方法的完整实现。

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <button onClick={this.updateCounter}>NoArgCounter</button>
        <button onClick={() => this.updateCounterByArg(this.state.count)}>ArgCounter</button>
        <span>{this.state.count}</span>
      </div>
    );
  }

  updateCounter = () => {
    let { count } = this.state;
    this.setState({ count: ++count });
  };

  updateCounterByArg = counter => {
    this.setState({ count: ++counter });
  };
}

export default Counter;