Reactjs 为什么我从W3学校的函数中得到一个“未定义”错误？

我正在考虑在个人项目中使用打字机的效果，因此我在上阅读了W3文章，并查看了它们提供的功能。我想把它插入我的React项目，但收到一条信息说‘打字机没有定义’，我不知道为什么。在我看来，这个函数是从内部调用自己的，这很奇怪

下面是它在我的React组件中的显示方式：

import React, {Component} from 'react';

class Hero extends Component {

    componentDidMount = () =>{
        this.typeWriter();

    }

    typeWriter = () => {
        let i = 0;
        let message = 'I want to hike';
        let speed = 50;

        if(i < message.length){
            document.getElementById('typewriter-effect').innerHTML += 
message.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        }
    }

    render(){
        return (
            <div className='banner-container'>
                <h1>iHike</h1>
                <h3>Find your adventure</h3>
                <p id='typewriter-effect'></p>
            </div>
        )
    }
}

export default Hero;

---

现在，它由工作解决方案组成。希望你能找出你遗漏了什么：D。。。你在setTimeout中丢失了这个.typewriter，还有i的声明

添加的工作解决方案

你在哪里定义了打字机的功能？

import React, {Component} from 'react';

let i = 0;
export default class Hero extends Component {

        componentDidMount = () =>{
            this.typeWriter();

        }

        typeWriter = () => {
            const message = 'I want to hike today in Mountain';
            const speed = 50;
            if(i < message.length){
                document.getElementById('typewriter-effect').innerHTML += 
    message.charAt(i);
                i++;
                setTimeout(this.typeWriter, speed);
            }
        }

        render(){
            return (
                <div className='banner-container'>
                    <h1>iHike</h1>
                    <h3>Find your adventure</h3>
                    <p id='typewriter-effect'></p>
                </div>
            )
        }
    }