Question

我对Typescript和React很陌生。我一直在尝试实现react-rewards npm库，并且解决了一个问题。

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

我可能是错的，因为我从未使用过此软件包，而是根据文档/ Useage主题使用。他们没有初始化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页面，我认为这是我唯一可以推断的。

Answer 3

将您的 onClick 更改为如下所示：

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

打字稿：TypeError未定义

3 个答案: