打字稿：TypeError 未定义

Question

我对打字稿和反应相当陌生。我一直在尝试实现react-rewardsnpm 库，除了一个问题，我已经解决了所有问题。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 is undefined。最好的解决方法是什么？

Answer 1

它与 TypeScript 无关。TS 只是一个编译器和 linter，您会收到运行时错误。这是这一行：

this.reward.rewardMe()

在ref获取充分组件后坐骑分配并rewardMe()试图立即调用它。这也是次要错误。您不想使用()调用或函数将立即触发（并且永不停止）。

该行应该是

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

Answer 2

将您的更改onClick为这样的：

onClick={() => {this.reward.rewardMe()}}

Answer 3

因为我从来没有使用过这个方案，但根据文件/我可能是错的使用率话题。他们没有初始化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>

    )

  }

}

再说一次，我可能是错的，但根据 github 页面，我认为这是我唯一可以推断的。