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无论如何第二个循环都不起作用。