Reactjs MobX可观察到的更改不更新UI/重新提交

我有一个UIStore，其中包含一个弹出窗口的状态，无论它是否打开。“启用产品”按钮应该更新UI存储以打开弹出窗口，当单击它时，状态会成功更改（通过打印道具进行检查），但弹出窗口不会打开。我尝试将打开状态作为道具传递给

组件，但是，这也不起作用

如果我将默认值设置为true，以便在页面加载时显示弹出窗口，则弹出窗口上的关闭按钮会正常工作。因此，当我更新组件内部的状态时，它可以完美地工作，但在组件外部，什么也没有

我正在使用Next.js和MobX 6

import { observable, action } from 'mobx';

class UIStore {
  @observable productPickerActive = false;

  @action setProductPickerActive = (value) => {
    console.log('Got value ' + value)
    this.productPickerActive = value;
  }
}

export default UIStore;

在我的父组件/页面中，我已经注入了store并可以将道具记录在console.log中

import React from 'react';
import {Page} from "@shopify/polaris";
import {TitleBar} from "@shopify/app-bridge-react";
import ProductPicker from "../components/molecules/ProductPicker";
import { observer, inject } from 'mobx-react';

@inject('uiStore')
@observer
class Settings extends React.Component {
  constructor(props) {
    super(props);
  }


  render () {

    return (
      <Page title={"Settings"} separator>
        <TitleBar
          title={"Settings"}
          primaryAction={{
            content: 'Enable Products',
            onAction: () => this.props.uiStore.setProductPickerActive(true)
          }}
          secondaryActions={[{content: 'Print Props', onAction: () => console.log(this.props)}]}
        />
        <ProductPicker/>
      </Page>
    );
  }

}

export default Settings;

为什么我的按钮不能打开弹出窗口

---

谢谢

这回答了你的问题吗？这回答了你的问题吗？

import {ResourcePicker} from "@shopify/app-bridge-react";
import { observer, inject } from 'mobx-react';

function ProductPicker(props) {

  const handleSelection = (resources) => {
    props.uiStore.setProductPickerActive(false)
    console.log(resources);
  }
  return (
    <React.Fragment>
      <ResourcePicker
        resourceType={"Product"}
        open={props.uiStore.productPickerActive}
        showVariants={false}
        onCancel={() => props.uiStore.setProductPickerActive(false)}
        onSelection={(resources) => handleSelection(resources)}
      />
    </React.Fragment>
  );
}

export default inject('uiStore')(observer(ProductPicker));

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": false }]
  ]
}