存储 udates mobx 时组件不会重新呈现

Question

我做了一个商店，有一个字段和一个动作。但是，当触发动作的事件被触发时，存储本身并没有更新，组件也没有被重新渲染。

商店：

configure({ isolateGlobalState: true });

class CallStore {
  @observable call;

  constructor() {
    this.call = false;
  }

  @action turnOnCall = (isTrue) => {
    return this.call = isTrue;
  }
}

const callStore = new CallStore();

export default callStore;

需要更新的组件：

 const App = (props) => {
  return props.call ? (   
    <main>
      <VideoFormContainer />
      <Video />
    </main>
  ) : (
    <main>
      <VideoFormContainer />
    </main>
  );
};

 export default App;

该组件的容器：

    const AppContainer = inject('callStore')(observer(({ callStore }) => (
      <App call={callStore.call} />
    )));
    
export default AppContainer;

调用动作的组件

import callStore from '../../stores/callStore';

    const someComponent = () => {
    return (
        <button className="header__form-button" onClick={callStore.turnOnCall(true)} type="submit">Join</button>
    )
}

Answer 1

问题是商店中没有 makeObservable。

constructor() {
   makeObservable(this);
}

存储 udates mobx 时组件不会重新呈现

component doesn't re-render when store udates mobx

javascript

reactjs

mobx

mobx-react