你如何参考主要的＆＃34;这个＆＃34;在循环中？

Question

我有一个包含字符串的数组，我希望将这些项目作为单个字符串返回，但它们之间有空格。

listProperties() {
    this.properties = "";
    this.state.withoutSuit.forEach(function (i, j) { 
      this.properties += i;
      this.properties += " ";
    });
    console.log(this.properties);
    return this.properties;
  }  

所以在构造函数中我将this.state.withoutSuit作为我的数组，并将this.properties作为我存储其间隔字符串版本的地方。

首先在函数中将this.properties设置为空字符串，然后我想用withoutSuit数组项填充它。

但是当我进入 forEach循环时，this.properties是未定义的。我认为这是因为＆＃34;这个＆＃34;现在指的不是构造函数，而是指this.state.withoutSuit： - 是吗？

如果是这样，我如何从循环中引用属性变量？

谢谢！

Answer 1

您可以使用arrow functions

"tv"

Answer 2

只需将listProperties() { this.properties = ""; this.state.withoutSuit.forEach((i, j)=> { this.properties += i; this.properties += " "; }); console.log(this.properties); return this.properties; } 更改为function(i, j)。

(i, j) =>

并确保在构造函数中绑定此方法：

listProperties() {
    this.properties = "";
    this.state.withoutSuit.forEach((i, j) => { 
      this.properties += i;
      this.properties += " ";
    });
    console.log(this.properties);
    return this.properties;
  }

Answer 3

在您的功能中使用本地变量，例如me（它与箭头功能的旧浏览器版本更兼容）：

listProperties() {
    var me = this; // local variable
    this.properties = "";
    this.state.withoutSuit.forEach(function (i, j) { 
      me.properties += i; // use 'me' in your loop instead of 'this'
      me.properties += " ";
    });
    console.log(this.properties);
    return this.properties;
}

或者根据许多人的建议，您可以使用arrow functions：

listProperties() {
    this.properties = "";
    this.state.withoutSuit.forEach((i, j)=> { 
      this.properties += i;
      this.properties += " ";
    });
    console.log(this.properties);
    return this.properties;
} 

但它与旧浏览器不兼容（IE11不支持它）。检查browser's versions compatibility。

Answer 4

使用“箭头功能”代替功能。它在ES6中添加了

    listProperties() {
        this.properties = "";
        this.state.withoutSuit.forEach((i, j) => { 
        this.properties += i;
        this.properties += " ";
     });
     console.log(this.properties);
     return this.properties;
    }  

Answer 5

再一次，将thisArg参数传递给forEach方法，如下所示：

this.state.withoutSuit.forEach(function (i, j) { 
  this.properties += i;
  this.properties += " ";
}, this);

在MDN

forEach。

Answer 6

我认为您好像不希望properties变量成为this的成员，而是希望它在listProperties()方法中成为临时变量

listProperties() {
    let properties = "";
    this.state.withoutSuit.forEach(function (i, j) { 
        properties += i;
        properties += " ";
    });
    return properties;
}

为什么？

1. 通常不建议在React组件上使用私有属性，而是使用状态。此规则的一个例外是当前引用，但这可能在将来发生变化。
2. 在计算机编程中，您通常希望您的功能是纯粹的。当一个方法没有副作用时就是纯粹的，比如在函数外面设置一个可见的变量。纯粹的方法更容易推理。

如何使用render功能。

class MyComponent 
  extends React.Component
{
    listProperties() {
        let properties = "";
        this.state.withoutSuit.forEach(function (i, j) { 
            properties += i;
            properties += " ";
        });
        return properties;
    }

    render() {
        const properties = this.listProperties();
        return <span>{properties}</span>
    }
}

Answer 7

您应该使用Array.prototype.join()来连接数组中的字符串。每个主要浏览器都支持它：

const strings = ['This', 'is', 'just', 'an', 'example'];

const joined = strings.join(' ');

console.log(joined); // > This is just an example

要在组件类中使用它，您可以这样做：

使用babel和public class fields syntax ：

listProperties = () => this.state.withoutSuit.join(' ');

或使用bind() ：

class App extends Component {
    constructor(props) {
        super(props);

        // other initialization

        this.listProperties = this.listProperties.bind(this);
    }

    listProperties() {
        return this.state.withoutSuit.join(' ');
    }

    // other functions
}

或getter，以便您可以像财产一样访问：

class App extends Component {
    state = {
        withoutSuit: ['This', 'is', 'just', 'an', 'example'],
    }    

    get listProperties() {
        return this.state.withoutSuit.join(' ');
    }

    render() {
        // will render: <p>This is just an example</p>

        return() (
            <p>{this.listProperties}</p>
        );
    }
}