React/CSS：动态更新表行的类名只能随机工作

Question

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

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

onClick 将我的组件的onClick更改为所选模块：

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

classNameForRow() function 根据当前选择返回样式：

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 时，将返回正确的类名。 对于某些行，代码正常工作并标记 selectedRow 以及显示具有 id === nextModuleID 的模块的行（基本上是所选模块的继任者）。 但是浏览器没有渲染从 classNameForRow() 返回的随机行的 css class。 我是 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

很难判断您提供的片段发生了什么。 我能看到的唯一潜力是支票——

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

可能永远不会返回 true，因为我怀疑selectedModule和mod是具有不同引用的对象，而另一个if条件是检查 id，我假设它是原语，例如字符串。

尝试类似的东西 -

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

Answer 2

已解决：有冲突的 CSS Styles 随机覆盖了表格行使用的样式。