1

mobx-state-tree 很新。每当更改我的模型以使 types.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>
  }
}
4

2 回答 2

1

你的 treeStore 应该是@observable

class App extends Component {
  @observable treeStore;
}
于 2019-09-11T11:09:20.390 回答
0

types.map不是您的常规Map（尽管它具有类似的方法），虽然期望它可以接受 a 是合乎逻辑的，但Map显然它不能（也许您应该在他们的跟踪器上提出有关它的问题）。但是，要解决您的直接问题，只需在您的setTree操作中传递一个对象，或者 - 数组数组：

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

或者

this.treeStore.setTree([[ 'one', '1' ]]);
于 2019-07-30T06:22:28.147 回答