ClassName 只取我数组中的最后一项答案

【问题标题】：ClassName only takes the last item from my arrayClassName 只取我数组中的最后一项
【发布时间】：2019-08-13 09:41:04
【问题描述】：

我只是从 reactJS 和一般编码开始。我现在不能让它工作：

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

这就是为什么我做了一个 'if-else' 语句来创建一个包含类名必须是什么的数组

但是className总是取最后一项

我的 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=“一”，与“二”和“三”相同。

【问题讨论】：

className={'activity' + ' ' + this.state.results[index].group}
Owww.. 答案很简单，我一直在寻找解决方案.. 非常感谢和抱歉这个愚蠢的问题！ @MukeshSoni
1.你可以用Cstyle = this.state.results[i].group; 替换这三个if 块 2. 你会想要Cstyle[i] = ... 虽然 3. 根本不需要设置状态，因为你可以直接在map 函数中插入组。
就像 Mukesh 说的：className={['activity', res.group].join(' ')} 和 <p>{res.test}</p>

标签： javascript reactjs

【解决方案1】：

let Cstyle = []

Cstyle 以数组的形式开始生活……

 Cstyle = 'one'

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

如果你想向数组中添加一些东西，请使用它的push() 方法。不要覆盖它。

Cstyle.push('one');

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

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

【讨论】：

【解决方案2】：

不用for循环，可以直接用组名作为类名

{this.state.results.map((res, index) => ( 
    <div key={index} className={`activity ${res.group}`}>
    <p>res.test</p>
    </div>
))}

【讨论】：

谢谢！这是最短的可用答案，我根本没有看到。真的很欣赏它！

【解决方案3】：

由于 Cstyle 是数组，因此您正在使用字符串变量重新分配它。

您必须将样式添加到该数组中，而不是重新分配它。

使用：Cstyle.push('one') 或 Cstyle[i] = 'one' 在数组中添加值。

  let Cstyle = []
for (let i = 0; i < 10; i++) {

  if(this.state.results[i].group === 'one'){
    Cstyle.push('one');
    }
    else if(this.state.results[i].group === 'two'){
    Cstyle.push('two');
    }
    else if(this.state.results[i].group === 'three'){
    Cstyle.push('three');
}
this.setState({style : Cstyle})}

【讨论】：

谢谢！对理解有很大帮助！

【解决方案4】：

您正在循环中初始化数组Cstyle，因此它只会包含您放入其中的最后一项。

但是，您将字符串值分配给覆盖数组并因此包含最后一个字符串的数组

【讨论】：