javascript - Typescript: TypeError אינו מוגדר

אני יחסית חדש ב-Typescript ו-React. ניסיתי ליישם את ספריית ה-npm react-rewards ופתרתי את כל הבעיות חוץ מבעיה אחת.

type Props = {}

class Surprisebutton extends Component<Props>{
    reward: any;

    render() {
        return (
            <Reward 
            ref={(ref) => { this.reward = ref }}
            type='memphis'>
                <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                    Surprise!
              <FavoriteIcon style={{ marginLeft: 10 }} />
                </Button>
            </Reward>
        )
    }
}

לאחר הרצת npm start אני מקבל שגיאה שאומרת TypeError: this.reward הוא לא מוגדר. מה הדרך הטובה ביותר לפתור זאת?

תשובה #1

זה לא קשור ל-TypeScript. TS הוא רק קומפיילר ולינטר ואתה מקבל שגיאת ריצה. זה השורה הזו:

this.reward.rewardMe()

ה-ref מקבל שיוך לאחר שהרכיב מותקן במלואו ו-rewardMe() מנסה לקרוא לו מיד. זו גם טעות משנית. אינך רוצה להשתמש בביצוע () אחרת הפונקציה תתבצע מיד (ולא תפסיק אף פעם).

השורה צריכה להיות

<Button onClick={this.reward.rewardMe} style={styles.button} variant="contained" color="primary">

תשובה #2

אני עשוי לטעות כי מעולם לא השתמשתי בחבילה הזו, אבל לפי התיעוד/נושא השימוש, הם לא מאתחלים את המשתנה reward. נסה להסיר את זה, הנה הגרסה המתוקנת

type Props = {}

class Surprisebutton extends Component<Props>{

render() {
    return (
        <Reward 
        ref={(ref) => { this.reward = ref }}
        type='memphis'>
            <Button onClick={this.reward.rewardMe()} style={styles.button} variant="contained" color="primary">
                Surprise!
          <FavoriteIcon style={{ marginLeft: 10 }} />
            </Button>
        </Reward>
    )
  }
}

שוב, ייתכן שאני טועה אבל לפי דף הגיטהאב, אני חושב שזה הדבר היחיד שאני יכול להסיק.