在内容脚本中使用 MobX 和 ReactJS 的问题Chrome 扩展

如何解决在内容脚本中使用 MobX 和 ReactJS 的问题Chrome 扩展

我正在编写 chrome 扩展，它将 ReactJs 组件注入页面内容（在 content.ts 文件中渲染 React 组件）。
我想用 MobX 处理应用状态，但它在这个上下文中的行为与我以前不同。
这是我无法处理的情况：

store.ts

@observable.shallow attributeData: PageItem[] = [];
@action setAttribute = (index: number,item: PageItem) => {
  this.attributeData[index] = item;
};
export const StoreContext = createContext<Store>({} as Store);
export const StoreProvider = StoreContext.Provider;
export const useStore = (): Store => useContext(StoreContext);

form-attributes.ts（组件）

const store = useStore();
...
return uSEObserver(() => {
return (
  <FormControl className="formAttributes">
    {store.attributeData.length === 0 ? (
      <div>No data downloaded! {store.attributeData.length}</div>
    ) : (
      store.attributeData.map((item: PageItem,index: number) => (
        <FormAttributesItem item={item} index={index} />
      ))
    )}
    ...

form-attributes-item.ts（组件）

const saveChanges = () => {
store.setAttribute(props.index,{
  name: name,value: value,selector: props.item.selector,text: props.item.text,} as PageItem);

setEditMode(false);
};

content.ts

const store = new Store();
  ReactDOM.render(
<React.StrictMode>
  <ReactQueryConfigProvider config={queryConfig}>
    <StoreProvider value={store}>
      <App />
    </StoreProvider>
  </ReactQueryConfigProvider>
</React.StrictMode>,app
);

问题是：当我在 form-attributes-item 组件中编辑 attributeData 集合项时，编辑结果在 form-attributes 组件中不可见。
当我添加 console.log 并在控制台中列出商店内容时 - 编辑结果可见。
因此，父组件似乎无法看到子组件所做的更改，但是在我之前编写的常规 ReactJs 应用程序中，它运行良好。这个扩展环境会影响 MobX 的行为吗？
提前致谢。