Reactjs 反应+；Mobx如何更改不同组件的值并在任何地方显示更改？

如何从不同的位置更改变量？ 变量是一个，但它在不同的组件中分别更改，并且在一个组件中所做的这些更改不会反映在另一个组件中

App.js

import AppStore from "./AppStore";
import { observer } from "mobx-react";
import SomeComponent from "./SomeComponent";

const store = AppStore();

const App = observer(() => {
  return (
    <div className="App">
      <div>
        <i>This is text in App:</i> {store.text}
      </div>
      <div>
        <button
          onClick={() => {
            store.changeText("This is text from App");
          }}
        >
          Change text from App
        </button>
      </div>

      <SomeComponent />

    </div>
  );
});

export default App;

import React from "react";
import AppStore from "./AppStore";
import { observer } from "mobx-react";

const store = AppStore();

const SomeComponent = observer((props) => {
  return (
    <div>
      <div>
        <i>This is text in component:</i> {store.text}
      </div>
      <div>
        <button 
            onClick={() => store.changeText("This is text from component")}
        >
          Change text from component
        </button>
      </div>
    </div>
  );
});

export default SomeComponent;

import { action, makeObservable, observable } from "mobx";

export default function AppStore() {
  return makeObservable(
    {
      text: "Initial text",
      changeText(data) {
        this.text = data + ": " + new Date().toLocaleTimeString();
      }
    },
    {
      text: observable,
      changeText: action
    }
  );
}

---

在

App

组件中，您通过此代码

const store=AppStore（）创建了一个对象变量
store
。然后使用它，显示它，更改它等等。稍后，在
SomeComponent
组件中，通过
const store=AppStore（）创建一个新变量
store
。即使变量名相同，并且使用对象，这也是两个不同的变量。因此，为什么更新一个不更新另一个。在DOM中，它们是不同的对象。要修复它，而不是在
SomeComponent
中创建新对象，只需从父组件传递
store
。在
应用程序中
，当呈现
某个组件时
像这样传递
存储
变量

<SomeComponent store={store} />

这样，两个组件可以更改相同的变量数据

编辑。我对你的项目进行了分叉，并对代码进行了编辑，使之与我在这里发布的内容相匹配，这样你就有了一个可供分析的实例
 我找到了与React上下文相关的解决方案。
很抱歉，没有立即在此处添加。
不幸的是，很难理解Mobx文档


首先，我们需要创建上下文并创建提供者：



然后，我们需要在index.js中使用以下内容包装主渲染：

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import AppStoreProvider from "./AppStoreProvider";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <AppStoreProvider>
    <App />
  </AppStoreProvider>,
  rootElement
);

从“react”导入{StrictMode}；
从“react dom”导入react dom；
从“/AppStoreProvider”导入AppStoreProvider；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

然后我们可以使用上下文：

import "./styles.css";
import React from "react";
import { UseAppStore } from "./AppStoreProvider";
import { observer } from "mobx-react";
import SomeComponent from "./SomeComponent";

const App = observer(() => {
  const store = UseAppStore();

  return (
    <div className="App">
      <div>
        <i>This is text in App:</i> {store?.text}
      </div>
      <div>
        <button
          onClick={() => {
            store.changeText("This is text from App");
          }}
        >
          Change text from App
        </button>
      </div>

      <SomeComponent />

    </div>
  );
});

export default App;

导入“/styles.css”；
从“React”导入React；
从“/AppStoreProvider”导入{UseAppStore}”；
从“mobx react”导入{observer}；
从“/SomeComponent”导入SomeComponent；
常量应用程序=观察者（（）=>{
const store=UseAppStore（）；
返回(
这是应用程序中的文本：{store？.text}
{
store.changeText（“这是来自应用程序的文本”）；
}}
>
更改应用程序中的文本
);
});
导出默认应用程序；


或者像这样：

import { useContext } from "react";
import { AppStoreContext } from "./AppStoreProvider";
import { observer } from "mobx-react";

const SomeComponent = observer((props) => {
  const store = useContext(AppStoreContext);

  return (
    <div>
      <div>
        <i>This is text in component:</i> {store.text}
      </div>
      <div>
        <button onClick={() => store.changeText("This is text from component")}>
          Change text from component
        </button>
      </div>
    </div>
  );
});

export default SomeComponent;

从“react”导入{useContext}；
从“/AppStoreProvider”导入{AppStoreContext}；
从“mobx react”导入{observer}；
const SomeComponent=观察者（（道具）=>{
const store=useContext（AppStoreContext）；
返回(
这是组件{store.text}中的文本
store.changeText（“这是来自组件的文本”）}>
从组件更改文本
);
});
导出默认组件；


希望它对某人有用
谢谢。谢谢。它很有效。但是没有道具真的没有办法在不同的组件中使用单个商店吗？@ArtSur欢迎你。有wayst，有点。你可以使用redux。你仍然需要使用道具，但不是从父母传给孩子，这会让人恼火，而且时间越长你们拥有的ld组件，你们有一个全球化的存储，你们可以使用容器从整个项目中选择你们想要的任何数据，并使用动作从任何地方修改你们想要的任何数据。现在我听到了react发布的一个叫做memo的东西，若我没记错的话，它支持和redux一样做，但更简单。但我从来并没有尝试过。使用
mobx react
我不知道。我从来没有使用过它，也没听说过它，不管怎样，你必须只有一个存储实例。不能执行多个
createStore
方法来创建整个新存储。
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import AppStoreProvider from "./AppStoreProvider";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <AppStoreProvider>
    <App />
  </AppStoreProvider>,
  rootElement
);

import "./styles.css";
import React from "react";
import { UseAppStore } from "./AppStoreProvider";
import { observer } from "mobx-react";
import SomeComponent from "./SomeComponent";

const App = observer(() => {
  const store = UseAppStore();

  return (
    <div className="App">
      <div>
        <i>This is text in App:</i> {store?.text}
      </div>
      <div>
        <button
          onClick={() => {
            store.changeText("This is text from App");
          }}
        >
          Change text from App
        </button>
      </div>

      <SomeComponent />

    </div>
  );
});

export default App;

import { useContext } from "react";
import { AppStoreContext } from "./AppStoreProvider";
import { observer } from "mobx-react";

const SomeComponent = observer((props) => {
  const store = useContext(AppStoreContext);

  return (
    <div>
      <div>
        <i>This is text in component:</i> {store.text}
      </div>
      <div>
        <button onClick={() => store.changeText("This is text from component")}>
          Change text from component
        </button>
      </div>
    </div>
  );
});

export default SomeComponent;