美孚。父组件没有重新呈现吗？

Question

我在学黑帮。我不明白为什么不重新呈现父组件.单击按钮时，观察到的对象中字段的值将发生变化。父组件是一个观察者。为什么没有更新？我做了两个版本:只有mobx和mobx状态树。都不管用。

美孚

import React, { useContext , createContext} from 'react'
import { observer} from 'mobx-react-lite';
import { observable } from 'mobx'


const TestOb = observable({
    Name: 'Test'    
});

const StoreContext = createContext(TestOb);

const ChildComp = () => {
    const store = useContext(StoreContext)
    const clickHandle = () => {     
        store.Name = "Test 2";       
    }
    return (
        <div>
            <button onClick={clickHandle}>Click</button>
        </div>
    )
}

 const Test = () => {

    console.log("Test comp"); // does not fire on change
    
    return (
        <StoreContext.Provider value={TestOb}>
            <div>
                <ChildComp />
            </div>
        </StoreContext.Provider>
    )
}

export default observer(Test);

mobx状态树

import React, { useContext, createContext } from 'react'
import { observer, types } from 'mobx-react-lite';
import { observable } from 'mobx'
import { types } from 'mobx-state-tree'


const TestStore = observable(types.model({
    Name: types.maybe(types.string)
}).actions(self => {
    return {
        setName: () => { self.Name = "Test" }
    }
}))
const store = TestStore.create({});

const StoreContext = createContext(store);


const ChildComp = () => {
    const store = useContext(StoreContext)
    
    const clickHandle = () => {
        store.setName();
    }
    return (
        <div>
            <button onClick={clickHandle}>Click</button>
        </div>
    )
}

const Test = () => {
    console.log("Test"); // does not fire on change
    return (
        <StoreContext.Provider value={TestOb}>
            <div>
                <ChildComp />
            </div>
        </StoreContext.Provider>
    )
}

export default observer(Test);

Answer 1

当可观察到的数据依赖于更改时，observer组件将重新呈现。

您的Test组件目前没有取消引用任何可观察的数据。您可以尝试使用TestOb.Name来确保它的工作。

示例

const Test = () => {
  console.log("Test comp");

  return (
    <StoreContext.Provider value={TestOb}>
      <div>
        {TestOb.Name}
        <ChildComp />
      </div>
    </StoreContext.Provider>
  );
};