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

字典值更改时，组件未重新渲染

2 个答案: