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;