bugfix> javascript > 投稿

私はしばらくこのトピックを研究してきましたが、完全に行き詰っています。私は React.js を使用しています 、およびes6クラスコンポーネントを使用します。

this.showDate を呼び出すとき私の filterCourses の中 showDate を読み取れないと主張している機能 undefined のプロパティ 。これは、キーワード this を意味しますは undefined です 。

this をバインドしてみましたコンストラクター内。

質問

this の作り方定義?


class Upcoming_Training extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    }
  }
  componentDidMount() {}
  showDate(date) {
    // Creates a more readable date
    if (date) {
      date = date.substring(0, date.indexOf("T"));
      let dateArr = date.split('-');
      return dateArr[1] + '/' + dateArr[2] + '/' + dateArr[0];
    }
  }
  filterCourses() {
    let courseRows = [];
    if (this.props.upcoming_training != []) {
      if (this.showDate) {
        let courseRows = this.props.upcoming_training.map(function (
          course, index) {
          return <tr>
                   <th><button className='btn btn-sm btn-primary'> More Info </button></th> {/*Will make this button do something later*/}
                   <td>{course.Course}</td>
                   <td> {(course.Name.includes("OL -") ? course.Name.slice(5) : course.Name)}</td>
                   <td>{this.showDate(course.Start)}</td>
                   <td>{this.showDate(course.End)}</td>
                   <td>{(course.IsOnline ? "Online" : "On-Site")}</td>
                 </tr>
        })
      }
      return courseRows;
    }
    return [];
  }

回答 2 件
  • Emil Hが上記のコメントで言及したように、問題は this   map を入力するとバインドされません  関数。 thisArg を渡すことができます  マップ関数に移動するか、コンストラクターでバインドする別のクラス関数にその関数を移動します。これは次のようになります(テストされていません):

    class Upcoming_Training extends Component {
      constructor(props) {
        super(props);
        this.filterCourses = this.filterCourses.bind(this);
        this.renderCourseRow = this.renderCourseRow.bind(this);
      }
      showDate(date) {
        // Format date...
      }
      renderCourseRow(course, index) {
        return (
          <tr key={index}>
            <th><button className='btn btn-sm btn-primary'> More Info </button></th>
            <td>{course.Course}</td>
            <td>{(course.Name.includes("OL -") ? course.Name.slice(5) : course.Name)}</td>
            <td>{this.showDate(course.Start)}</td>
            <td>{this.showDate(course.End)}</td>
            <td>{(course.IsOnline ? "Online" : "On-Site")}</td>
          </tr>
        )
      }
      filterCourses() {
        if (this.props.upcoming_training != []) {
          return this.props.upcoming_training.map(renderCourseRow);
        }
        return [];
      }
      // ...Rest of component
    }
    
    

  • 最初に inputValue: '', の後にコンマを削除します  this.state宣言内。また、filterCourses関数で if(this.showDate)  条件は関数ではなくshowDateプロパティを探しています。また、関数showDateには日付が必要です。

    また、反応コンポーネントにはレンダリング関数が必要であるため、レンダリング関数も必要です。

あなたの答え