字典值更改时组件不重新渲染答案

【问题标题】：Component not re-rendering when dictionary value changes字典值更改时组件不重新渲染
【发布时间】：2019-09-07 17:49:02
【问题描述】：

简单：我更改了字典值并且组件没有重新渲染。当我记录它时，该值实际上会发生变化，它只是不会在屏幕上呈现。

这就是发生的地方。图标应该从“caret-down”变为“caret-right”，但由于某种原因它不是：

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

但它不起作用。不知道为什么这不起作用请帮助:)

【问题讨论】：

标签： javascript reactjs state mobx mobx-react

【解决方案1】：

您正在使用不是可变使用状态的道具

【讨论】：

但是 mobx 不应该处理这个问题 - 我已将所有内容标记为可观察，并且组件是观察者

【解决方案2】：

你不会在任何地方触发组件渲染，所以它当然不会更新。您可以像这样手动操作：

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

【讨论】：

这种情况下mobx中的observable/observer标签不应该触发重渲染吗？