当商店更新 mobx 时,组件不会重新渲染

时间:2021-01-25 12:44:51

标签: javascript reactjs mobx mobx-react

我用一个字段和一个动作创建了一个商店。但是,当触发动作的事件被触发时,存储本身不会更新,组件也不会重新渲染。

商店:

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

1 个答案:

答案 0 :(得分:0)

问题在于商店中没有 makeObservable。

using SqlConnection conn = new SqlConnection(connectionString)
{
                    AccessToken = accessToken
             
                var state = conn.State;
                using SqlCommand comm = new SqlCommand();
                var withBlock = comm;
                withBlock.Connection = conn;
                withBlock.CommandText = $"SELECT COUNT(ID)AS 'count'\n";
                logger.LogInformation("Query: " + withBlock.CommandText);
                conn.Open();
                var reader = comm.ExecuteReader();
               var count=0;
               if (reader.HasRows)
                {
                 if reader.Read()
                  {
               count = Convert.ToInt32(reader["count"]);
                 reader.Close();
                  }
             }
            logger.LogInformation("Count = " + count.ToString());
            return count;
}