React/CSS:动态更新表行的className只能随机工作

Question

我正在尝试更新组件的render((函数中表行的样式。样式应根据当前选择进行更改：

this.props.process.modules.map((thisModule,index) => {
return <tr className={this.classNameForRow(index)} onClick={()=>{this.selectModule(index)}
(...)

onClick将我的组件的状态更改为选定的模块：

selectModule = (index) =>{
let mod = this.props.process.modules[index];
this.setState({selectedModule:mod});
}

classNameForRow((函数返回基于当前选择的样式：

classNameForRow = (index) =>{
let mod = this.props.process.modules[index];
let name = "tr-standard";
if (this.state.selectedModule === mod) {
name ="tr-selected"
}
if (this.state.selectedModule.nextModuleID === mod.identifier) {
name ="tr-successor"
}
return name;
}

当我放入console.log时，将返回正确的classNames。对于某些行，代码正在工作，并标记selectedRow以及显示id为===nextModuleID的模块的行(基本上是所选模块的后续行(。但是浏览器没有为随机行呈现从classNameForRow((返回的css类。我是JS和React的新手；行为；这很奇怪。有人有主意吗？

完整代码

import React, { Component, useState,setState,useEffect } from 'react'
import './ModulesTable.css'
export class ModulesTable extends Component {
constructor(props){
super(props);
this.state = {
selectedModule : {}
};

}

selectModule = (index) =>{
console.log("BEFORE: " + this.state.selectedModule.identifier);
let mod = this.props.process.modules[index];
console.log("MOD: " + mod.identifier)
this.setState({selectedModule:mod});
console.log("AFTER: " + this.state.selectedModule.identifier);
}

classNameForRow = (index) =>{

let mod = this.props.process.modules[index];
let name = "tr-standard";
if (this.state.selectedModule.identifier === mod.identifier) {
name ="tr-selected";
}
if (this.state.selectedModule.nextModuleID === mod.identifier) {
name ="tr-successor";
}
console.log(index + ": " + name);
return name;
}

render() {

return (
<>
<table className="mainTable">
<thead>
<tr>
<td>
<label>ID</label>
</td>
<td>
<label>Name</label>
</td>
<td>
<label>Type</label>
</td>
<td>
<label>Successor</label>
</td>
<td>
<label>Alternative Successor</label>
</td>
<td>
<label>Steps</label>
</td>
</tr>
</thead>
<tbody>
{
this.props.process.modules.length > 0
?this.props.process.modules.map((thisModule,index) =>{
const myClassName = this.classNameForRow(index);
return <tr className={myClassName} onClick={()=>{this.selectModule(index)}} key={index}>
<td>
{thisModule.identifier}
</td>
<td>
{thisModule.name}
</td>
<td>
{thisModule.moduleType}
</td>
<td>
{thisModule.nextModuleID}
</td>
<td>
{thisModule.altModuleID}
</td>
<td>
<button>Edit</button>
</td>
</tr>
})
: null
}
</tbody>
</table>
{

<div>
{
this.props.process.modules.length === 0
?<label>This Process does not have any modules</label>
:<label>{this.props.process.modules.length} Module </label>
}
</div>
}
<div className="infoBar">
<div className="color-box-successor"></div>
</div>
</>
)
}
}
export default ModulesTable

Answer 1

已解决：存在冲突的CSS样式，这些样式随机覆盖了表行使用的样式。

Answer 2

很难判断您提供的代码段发生了什么。我能看到的唯一潜力是检查-

if (this.state.selectedModule === mod) {
name ="tr-selected"
}

可能永远不会返回true，因为我怀疑selectedModule和mod是具有不同引用的对象，而另一个if条件是检查id，我认为它们是基元，例如String。

试试类似的东西

if (this.state.selectedModule.id === mod.identifier)...