Question

mobx-state-tree非常新。每当更改模型以使type.map获得新引用时，都不会重新呈现我的组件。在我的示例中，更改模型上的字符串确实会触发重新渲染。我正在读取我想重新渲染的组件中的这两个属性，并用@observer装饰了它。

这是一个Stackblitz示例：https://stackblitz.com/edit/react-n54mud

在第37行中进行注释以使其起作用。

型号：

export const treeModel = types
    .model({
        tree: types.map(types.string),
    test: ''
    })
    .actions(self => ({
        setTree(tree) {
      self.tree = tree
    },
    setTest(data) {
      self.test = data;
    }
    }));

应用

class App extends Component {
  treeStore;

  constructor() {
    super();
    this.state = {
      name: 'React'
    };

    this.treeStore = treeModel.create();
    this.treeStore.setTree(new Map());
    setTimeout(() => {
      this.treeStore.setTree(new Map());
      // Enabling this will retrigger the rendering of the Test comp
      //this.treeStore.setTest('azerty');
    }, 2000);
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <Test store={this.treeStore}></Test>
      </div>
    );
  }
}

测试组件

@observer
class Test extends Component {

  constructor(props) {
    super(props);
  }

  render() {
      console.log('rendered');
      const {tree, test} = this.props.store;
      return <div>test</div>
  }
}

Answer 1

您的treeStore应该为@observable

class App extends Component {
  @observable treeStore;
}

Answer 2

types.map不是您的常规Map（尽管它们具有相似的方法）（虽然它们具有相似的方法），但是期望它可以接受Map是合理的，显然不是（也许您应该在他们的tracker 上提出问题）。但是，要解决您眼前的问题，只需在setTree动作中传递一个对象，或-数组数组：

this.treeStore.setTree({ 'one': '1' });

或

this.treeStore.setTree([[ 'one', '1' ]]);

Mobx-状态树不会在新的Map参考上重新呈现

2 个答案: