字典值更改時，組件未重新渲染

Question

簡單：我更改了字典值，並且組件未重新渲染。 當我記錄該值時，該值實際上會更改，只是不會在屏幕上呈現。

這就是發生的地方。 圖標應從“插入符號向下”更改為“插入符號右側”，但由於某些原因，它不是：

import React, {Component} from 'react';
import {inject,observer} from 'mobx-react';


@inject("appStore") @observer
class Attribute extends Component {
    ...

    toggleValueDisplay = (attr) => {
        node.attributeToggle[attr] = !node.attributeToggle[attr];
    };

    render() {
        ...
        const { node, attr } = this.props;
        let vals = node.attributes.get(attr);

        return (
            <div>
                <span>
                    <div>{attr}</div>
                    <Icon type={node.attributeToggle[attr] ? "caret-down" : "caret-right"} onClick={(attr) => {this.toggleValueDisplay(attr)}}/>
                </span>
                    ...
            </div>
        )
    }
}

export default Attribute;

這是呈現Attribute組件的位置：

import React, {Component} from 'react';
import {inject,observer} from 'mobx-react';
import Attribute from "./attribute";

@inject("appStore") @observer
class Tab extends Component {
    ...

    render() {
        let node = this.props.appStore.repo.canvas.currentNode;

        return (
            <div className="tab-body">
            {/* ATTRIBUTES */}
            {
                <div>
                    <h5>Attributes</h5>
                    {
                        [...node.attributes.keys()].map((attr) => {
                            return <Attribute node={node} attr={attr} key={attr}/>
                        })
                    }
                </div>
            }
            </div>
        );
    }
}

export default Tab;

這是Node對象，僅供參考

import {observable} from 'mobx';

export default class Node {

    id = '';
    ...
    @observable attributes = new Map(); // {attribute : [values]}
    @observable attributeToggle = {}; // {attribute : bool}

    constructor(r) {
        for (let property in r) {
            this.attributes.set(property, r[property]);
            this.attributeToggle[property] = false;
        }
    }
}

=========================我嘗試過的東西===================== ====

我試過更改此：

{
    node.attributeToggle[attr] ?
        <Icon type="caret-down" onClick={(attr) => {this.toggleValueDisplay(attr)}}/>
    :
        <Icon type="caret-down" onClick={(attr) => {this.toggleValueDisplay(attr)}}/>
}

以及在Tab中使用Attribute組件的地方

{/* ATTRIBUTES */}
{
    <div>
        <h5 >Attributes</h5>
        {
            [...node.attributes.keys()].map((attr) => { 
                return <Attribute node={this.props.appStore.repo.canvas.currentNode} attr={attr} key={attr}/>
            })
        }
    </div>
}

但這不起作用。 不知道為什么這不起作用，請幫助:)

Answer 1

您正在使用不是可變使用狀態的道具

Answer 2

您不會在任何地方觸發組件渲染，因此它當然不會更新。 您可以像這樣手動進行操作：

toggleValueDisplay = (attr) => {
        node.attributeToggle[attr] = !node.attributeToggle[attr];
        this.forceUpdate()
    };