为什么我的道具改变了，ComponentUpdate为什么不触发？

Question

我试图弄清楚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}
            />
        ])
    }
}

更新数据：

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>
        );
    }
}

呼叫handleContextMenu：

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
    }
}

出于调试目的，我添加了一个setInterval方法。通过代码中的另一个代码段，我确实将props.data[0].activated更改为false，并且所做的更改确实反映在控制台日志中。那么为什么shouldComponentUpdate没有被触发以及如何使其触发？