Reactjs 为什么在我的道具改变的情况下，ComponentUpdate不应该开火？

我正在试图弄清楚为什么

shouldComponentUpdate

方法不能启动

以下是我的道具的外观：

Object

children: [Object, Object, Object, Object, Object] (5)

data: Array (2)
0 {id: 1, activated: true}
1 {id: 2, activated: true}

key: undefined

rowRender: function()

我有以下片段

export function withState(WrappedGrid) {
    return class StatefulGrid extends React.Component {
        constructor(props) {
            super(props);
            setInterval(() => console.log(this.props), 5000)
        }

        shouldComponentUpdate(){
            console.log("props updated")
            return true
        }

        componentDidUpdate(prevProps, prevState) {
            console.log("update")
        }

        render() { ... }
    }
}

正在创建StatefulGrid组件：

const StatefulGrid = withState(Grid);

class NFTTable extends React.Component {
    constructor({rules}){
        super()
        this.rules = rules
        this.renderers = new Renderers()
        this.contextMenu = false
    }

    render(){
        return([
            <StatefulGrid
                key={"table"}
                data={this.rules}
                rowRender={this.renderers.rowRender}
            >
             // GridColumn ...
            </StatefulGrid>,
            <ContextMenu
                key={"context_menu"}
                caller={this.renderers.caller}
            />
        ])
    }
}

---

为了调试，我添加了一个

setInterval

方法。通过代码中的另一个片段，我确实将

props.data[0]更改为
false
，并且更改会反映在控制台日志中。那么为什么
不应该触发ComponentUpdate
以及如何触发它呢？
请告诉我们该问题的用法，最好是一个最小的可复制样本。你不应该改变道具或状态。@Sulthan我添加了一些上下文。这个项目肯定是一团糟是的。但这是我使用react的第一个代码，我还没有掌握所有的概念。我会接受任何建议^^不要在
中存储任何内容。如果您想存储某些内容，请将其置于
状态
，或直接从
道具
使用。其他任何事情都只是一个结果。
export default class ContextMenu extends React.Component{

    constructor({caller}){
        super()
        this.state = {
            show: false
        }
        caller(this)
    }

    handleContextMenu = (e, dataItem) => {
        e.preventDefault()
        this.dataItem = dataItem
        this.offSet = { left: e.clientX, top: e.clientY }
        this.activated = dataItem.dataItem.activated
        this.setState({ show: true })
    }

    componentDidMount() {
        document.addEventListener('click', () => {
            if(this.state.show)
                this.setState({ show: false })
        })
    }

    handleSelect = (e) => {
        switch(e.item.data){
            case "activation":
                this.toggleActivation()
                break
            default:
                console.log("Error, non registered event " + e.data)
        }
    }

    toggleActivation(){
        this.dataItem.dataItem.activated = !this.dataItem.dataItem.activated;
    }

    render() {
        return (
            <Popup show={this.state.show} offset={this.offSet}>
                <Menu vertical={true} style={{ display: 'inline-block' }} onSelect={this.handleSelect}>
                    <MenuItem data="delete" text="Delete rule"/>
                    <MenuItem data="activation" text={this.activated ? "Deactivate Rule" : "Activate rule"}/>
                </Menu>
            </Popup>
        );
    }
}

export default class Renderers {

    rowRender = (trElement, dataItem) => {
        let greyed = { backgroundColor: "rgb(235,235,235)" }
        let white = { backgroundColor: "rgb(255,255,255)" }
        const trProps = {
            ...trElement.props,
            style: dataItem.dataItem.activated ? white : greyed,
            onContextMenu : (e) => {
                this.contextMenu.handleContextMenu(e, dataItem)
            }
        };
        return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
    }

    caller = (contextMenu) => {
        this.contextMenu = contextMenu
    }
}