Question

我有一个存储为prop的数组：

constructor(props) {
    super(props);

    this.letters = [];
}

在componentDidMount方法中，我将此道具放在其中有forEach的{{1}}循环中：

setTimeout

这可以按预期工作，将一个类添加到prop数组中的每个元素。

然后，我尝试在此循环之后添加第二个componentDidMount() { this.letters.forEach((letter, index) => { setTimeout(function() { letter.classList.add('stroke'); }, index * 125); }); }循环。这看起来有些混乱，但是它与第一个forEach循环基本相同，但是它包裹在forEach中，因此它在1秒后开始：

setTimeout

在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行上得到了这个错误：

TypeError：无法读取未定义的属性“ forEach”

我尝试将this.letters.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，无论如何。

Answer 1

    const letters = this.letters;

    letters.forEach((letter, index) => {
        setTimeout(() => {
            letter.classList.add('stroke');
        }, index * 125);
    });

    setTimeout(function() {
        letters.forEach((letter, index) => {
            setTimeout(() => {
                letter.classList.add('fill');
            }, index * 125);
        });
    }, 1000);

问题出在箭头上（react使用es6箭头作为将其绑定到函数的方式）。

setTimeout(function() {-> setTimeout(() => {

https://reactjs.org/docs/react-without-es6.html#autobinding

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

1 个答案: