javascript - JSX 如何从循环中获取计数器并显示状态

Question

我遇到循环和状态问题。如果我想合并部分州名称和编号，如何在循环中显示州信息？

在 JS 文件中我有构造函数:

constructor(props) {
    super(props);
    this.state = {
        fruit_1: 'apple',
        fruit_2: 'orange',
        fruit_3: 'bannana',
        fruit_4: 'apple',
    }
}

并循环:

for (var i = 1; i < 5; i++) {
    console.log(this.state.fruit_i); 
    {/* Here is a problem. Calls undefined, but if I write this.state.fruit_1 -> displays correctly. */}
    {/* How to union counter with this state name? */}
}

Answer 1

您需要构建索引的名称。

这是一个例子:

state = {
        fruit_1: 'apple',
        fruit_2: 'orange',
        fruit_3: 'bannana',
        fruit_4: 'apple',
}

for (var i = 1; i < 5; i++) {
    console.log(state[`fruit_${i}`]);
}

在您的代码中您将使用:

console.log(this.state[`fruit_${i}`]);