this.prop 上的多个 forEach 语句导致错误

Question

我有一个存储为道具的数组：

constructor(props) {

    super(props);

    this.letters = [];

}

在一个componentDidMount方法中，我把这个 prop 放在一个forEach包含 a的循环setTimeout中：

componentDidMount() {

    this.letters.forEach((letter, index) => {

        setTimeout(function() {

            letter.classList.add('stroke');

        }, index * 125);

    });

}

这按预期工作，为 prop 数组内的每个元素添加一个类。

然后我尝试forEach在这个循环之后添加第二个循环。这看起来有点混乱，但它与第一个forEach循环基本相同，但它被包裹在 a 中，setTimeout以便在 1 秒后开始：

    this.letters.forEach((letter, index) => {

        setTimeout(function() {

            letter.classList.add('stroke');

        }, index * 125);

    });

    setTimeout(function() {

        this.letters.forEach((letter, index) => {

            setTimeout(function() {

                letter.classList.add('fill');

            }, index * 125);

        });

    }, 1000);

随着这两个forEach循环this.letters背靠背，我this.letters.forEach...在第二个循环的行上收到此错误：

类型错误：无法读取未定义的属性“forEach”

我尝试this.letters在里面设置为另一个变量componentDidMount，并使用该变量而不是this.letters：

    const letters = this.letters;

    letters.forEach((letter, index) => {

        setTimeout(function() {

            letter.classList.add('stroke');

        }, index * 125);

    });

    setTimeout(function() {

        letters.forEach((letter, index) => {

            setTimeout(function() {

                letter.classList.add('fill');

            }, index * 125);

        });

    }, 1000);

这有效，但我不确定我明白为什么this.letters不起作用？

我还尝试只用letters变量替换其中一个循环，而不是this.letters- 第一个循环与 . 一起工作正常this.letters，但this.letters无论如何第二个循环都不起作用。