javascript - ClassName 只从我的数组中获取最后一项

Question

我刚开始使用 reactJS 和一般编码。我现在无法让它工作:

我正在使用 .map() 循环遍历数据，我想提供一个类名，该类名随我从 API 获取的数据类型而变化。

这就是为什么我制作了一个“if-else”语句，该语句构成了类名必须是什么的数组

但是类名总是取最后一项

我的 if-else 语句

for (let i = 0; i < 10; i++) {
  let Cstyle = []
  if (this.state.results[i].group === 'one') {
    Cstyle = 'one'
  }
  else if (this.state.results[i].group === 'two') {
    Cstyle = 'two'
  }
  else if (this.state.results[i].group === 'three') {
    Cstyle = 'three'
  }
this.setState({style : Cstyle})}

我的映射

{this.state.results.map((res, index) => ( 
  <div key={index} className={'activity' + ' ' + [this.state.style]}>
    <p>res.test</p>
  </div>
))}    

当我从我的 API 获得“一”时，我希望列表中的某些项目具有 className=“一”，与“二”和“三”相同。

Answer 1

let Cstyle = []

Cstyle 以数组形式开始……

 Cstyle = 'one'

…但是在循环中你反复用一个字符串覆盖它。

---

如果您想向数组中添加一些内容，请使用其push() 方法。不要覆盖它。

Cstyle.push('one');

并在循环之前创建数组，而不是在循环内部。

---

旁白:惯用的 JavaScript 为构造函数/类保留以大写字母开头的变量名。不要对包含数组或字符串的变量使用该命名约定。