mobx-react 相关问题

todo列表闪烁复选框（React，Typescript，MOBX）

当我切换太多不同的狗（每种都没有完成到完成）时，每个todo flicker都从完成到未完成，然后返回完成。

由 mobx-react 装饰的 PureComponent 会抛出有关 `shouldComponentUpdate` 存在的错误

在控制台中我看到这个警告： index.js:2178 警告：主体有一个名为 shouldComponentUpdate()。 shouldComponentUpdate 不应在以下情况下使用 扩展 React.PureComponent。请前...

React Router 注册后导航到登录而不是主页

我正在使用react-router（v7）、mobx和mobx-react构建一个React应用程序。我有一个注册页面，单击“注册”按钮后，应用程序应更新用户状态并导航到...

MobX：由于启用了严格模式，因此不允许在不使用操作的情况下更改（观察到的）可观察值

我的上下文如下所示： 类 AuthStoreClass { 授权用户=空 构造函数（）{ 使自动观察（这个） } 登录=异步（参数）=> { 常量{数据：{数据：

React：为什么即使满足条件，我的条件渲染组件也没有被渲染？

在 React 中，有一个父组件，它根据是否有选定的线程有条件地渲染输出组件： {我的... 在 React 中，有一个父组件，它根据是否有选定的线程有条件地渲染 Output 组件： <div className="flex-grow overflow-y-auto p-4"> {myStore.selectedThread ? ( <Suspense fallback={ <div className="flex justify-center items-center align-middle h-full"> <Loader active={true} className="w-36 h-36" /> <p className="text-xs text-gray-500">Loading messages...</p> </div> } > <Output loading={loading} /> </Suspense> ) : ( <div className="flex flex-col items-center justify-center h-full"> <h1 className="text-6xl font-bold text-violet-900 mb-4"> Hi, {store.profile.fname} {store.profile.lname}! </h1> <p className="text-gray-500 text-xl mb-8"> Hit record and let the magic begin. </p> <RecordingComponent myStore={myStore} /> </div> )} </div> 并且，在父组件内的 RecordingComponent 中，我在 handlePostTranscription() 函数之后使用 MobX 存储函数选择一个线程： const audioTranscriberStatus = myStore.inputActiveRecord?.audioTranscriber?.status; console.log(audioTranscriberStatus); useEffect(() => { const handlePostTranscription = async () => { const { inputActiveRecord, selectedThread } = myStore; if (!inputActiveRecord || selectedThread) { return; } try { const newThread = await createThread(); const newThreadId = newThread.thread_id; setForceRender((prev) => !prev); await updateHistory(inputActiveRecord._id, { threadId: newThreadId }); const transcriptionText = inputActiveRecord.outputs.join(" "); await addMessage(newThreadId, "user", transcriptionText); await runAssistant( transcriptionText, newThreadId, "asst_L24bszgfqSOxw3yT0dTOaIzZ", "", ); myStore.selectThread(newThreadId); console.log(myStore.selectedThread); } catch (error) { console.error("Error in post-transcription handling:", error); } }; if (audioTranscriberStatus === "done") { handlePostTranscription(); } }, [audioTranscriberStatus]); 在调试日志中，我可以看到它正确设置了线程，这意味着 myStore.selectedThread 为 true，应该渲染 Output 组件。 但是，我的问题是在父组件中，Output 没有渲染——我仍然看到欢迎屏幕。当我使用 HistoryPanel 组件或 TextInputComponent 组件设置线程时，情况并非如此。它们似乎都使 Output 组件渲染成功。 来自TextInputComponent： const handleTextSubmit = async () => { try { setLoading(true); // Save the text using the API that goes through the middleware const response = await saveText(message); if (response.data.history && response.data.history._id) { const fetchedHistory = response.data.history; let currentThreadId = fetchedHistory.threadId; if (!currentThreadId) { // Create a new thread if none exists const newThread = await createThread(); currentThreadId = newThread.thread_id; // Update history with the new thread ID await updateHistory(fetchedHistory._id, { threadId: currentThreadId, }); } // Add the message to the thread await addMessage(currentThreadId, "user", message); // Run the assistant on the message await runAssistant( message, currentThreadId, "asst_L24bszgfqSOxw3yT0dTOaIzZ", "", ); myStore.selectThread(currentThreadId); } } catch (error) { console.error(error); } finally { setMessage(""); setLoading(false); } }; 来自HistoryPanel： const handleHistoryClick = async (threadId) => { try { setSelectedThreadId(threadId); myStore.selectThread(threadId); } catch (error) { console.error("Error selecting thread:", error); } }; 最后，我的商店： selectThread = async (threadId) => { if (this.selectedThread !== threadId) { this.selectedThread = threadId; await this.fetchThreadMessages(threadId); } }; 请问有人知道是什么原因造成的吗？ 我还尝试将查询参数添加到具有 threadId 的 url 中，并在 url 具有此参数时渲染 Output 组件，但是，在 handlePostTranscription() 函数中，当我使用 window.location.href 甚至useHistory，它甚至没有改变网址。所以异步函数肯定有什么东西搞砸了。 您已更改 myStore 上的对象属性，但 React 只监视外部对象，而不是其属性。 当你改变它所监视的内容时，React 会更新 DOM；然后它可以重新运行您的函数或重新渲染您的组件并对 DOM 进行更改。 我们看不到您的 myStore，但即使它是 useState 变量，它们也只能使用 Object.is 通过 浅相等 进行比较。你已经改变了它的状态，但 React 不知道要注意这一点。你的 TextInputComponent 和 HistoryPanel 意外地通过它们的 setMessage、setLoading 和 setSelectedThreadId 触发了这个，这可能会以 React 可以看到的方式改变状态变量； myStore 的更新是在您的两个工作组件中意外发生的。 尽管有一些令人沮丧的方法来强制重新渲染（请参阅可以在不调用 setState 的情况下强制 React 组件重新渲染吗？），但最好的选择可能是调用 setSelectedThreadId 或创建一个新的状态变量（例如 setTranscriptionUpdateTimestamp）将数据更改反映到您尝试更新的组件。

如何解决mobx-react中的装饰器问题？

我在使用 mobx React 装饰器时遇到了这个问题，在浏览器中出现语法错误。 如何避免呢？ @compated 获取 emailBody () { 返回generateTemplate(this.emailTitle, this.inputBody); ...

Mobx 计算未更新

mobx getter 似乎对 localStorage 中的更改没有反应。 类测试{ 构造函数（）{ makeAutoObservable(this); this.setCount = this.setCount.bind(this); } 私人静态_ins...

在 IE 11 上进行 React 重新渲染

我们正在开发一个使用 React 和 Mobx 的界面。 我们有一个组件可以通过以下方式激活用户帐户 发送到用户电子邮件的链接和代码： https://mysite/activate?代码=

React/Mobx 无法覆盖 Props 设置的默认值

这可能是“基本（缺乏）理解”问题之一。我正在进入 React，并致力于我的第一个主要应用程序，并且遇到了一个问题。 本质上是...

MobX React - 更新对象数组的单个索引会重新渲染所有子对象

我有一个 mobx 对象存储，这些对象显示在列表视图中，并在存储值上有一个地图，如下所示： {ObjectStore.objects.map((obj, 索引) => 我有一个 mobx 对象存储，这些对象显示在列表视图中，并在存储值上有一个地图，如下所示： {ObjectStore.objects.map((obj, index) => <ObjectItem key={obj.id} obj={obj} objIndex={index} ...unrelated UI Pros /> )} 在 ObjectItem 中有一个 onClick 处理程序，它向该特定对象添加一些新内容： const handleClick = () => { ObjectStore.updateObjectbyIdx(objIndex, newData) } 在商店 updateObjectbyIdx (index, data) { this.objects[index] = { ...this.objects[index], ...data} } 两个 React 组件都包装在观察者中。当句柄单击运行时，它会导致父容器重新呈现，然后所有 ObjectItem 组件重新呈现，即使附加数据仅通过索引添加到单个项目。 最初我完全避免使用索引并使用地图更新它，如下所示： updateObjectbyId (id, data) { this.objects = this.objects.map(obj => obj.id === id ? { ...obj, ...data} : obj }) } 但我假设由于这是创建一个新的数组引用，因此父容器观察ObjectStore.objects重新渲染。 切换到索引让我期望父级不会重新渲染，因为主数组引用仍然存在，并且由于我在最新点解构了值，因此只有单个 ObjectItem 会重新渲染。 我最终确实让它发挥作用： updateObjectbyIdx (index, data) { Object.keys(data).forEach(dataKey => { this.objects[index][dataKey] = data.dataKey } } 但是，当我只想更新数组中单个对象中的数据时，这似乎是一个奇怪的解决方法。 这样做： updateObjectbyIdx (index, data) { this.objects[index] = { ...this.objects[index], ...data} } 您还更新了对该对象的引用，并且由于父组件使用该对象，它将重新渲染。 您可以这样做 Object.assign：，而不是最后一个解决方案（实际上，这是正确且很好的） updateObjectbyIdx (index, data) { Object.assign(this.objects[index], data) } 这将保留引用并仅更新属性。只需记住深层嵌套的属性、对象、数组即可。要处理它们，您最好使用某种 mergeDeep 函数，Object.assign 不会进行合并，它基本上会覆盖您在自定义循环中所做的所有内容。

使用 useEffect() 的 Mobx 未在组件中渲染数据

我是 React 和 Mobx 的新手。 我想通过 useEffect() 中 GET 请求的数据来初始化组件。 mobx 存储有简单的组件： 从“mobx”导入{autorun}； 导入反应，{

如何在 Mobx 中迭代数组而不触发“在不读取任何可观察值的情况下创建/更新派生‘观察者’”。警告

我正在使用： "mobx": "^6.6.2", "mobx-react-lite": "^3.4.0", 想要对我的 .tsx 中的商店数组执行一个简单的 .map （.items 的类型为 MenuStore[]） {

传递到端点的变量正在返回值并同时取消定义

getFoodTemplate（订阅持续时间：任意，menuId：任意）{ const request = createAxiosInstance(this.token); runInAction(() => (this.loading.getFoodTemplate = true)); 请求`输入代码...

Mobx makeAutoObservable 不绑定这个

我用一个简单的 MobX 商店构建了一个基本的计数器 React 应用程序。我能够使用 makeObservable 创建可观察的 MobX 状态，但由于某种原因，当我尝试使用 makeAutoObservable 时，我得到了...

MobX - 类组件内的反应

今天我开始使用 MobX，遇到的第一个问题是如何在 Observable 更新时执行 React 类组件中的函数。 我的印象是我们可以实现这一点......

超出最大更新深度，React 限制嵌套更新数量，防止无限循环

我有下面的代码，它给出了类似的错误 [mobx] 遇到由反应或观察者组件引发的未捕获异常，位于：'Reaction[ScratchPadComparison#9165.render()]' Err...

mobx React 并未更新每个进度条

我有一个具有 mvvm 架构的应用程序，我想通过上传文件向用户展示 Ui 中的进度。 我从我的 api 获取进度，并且可以将其实时发送到我的 mobx 商店。这是它

无法用 mobx 存储中的对象替换状态

我正在尝试用一个对象替换 mobx store 道具。问题是我希望它一开始是非初始化的——但是当我更新 prop（它在代码中称为协议）时，mobx 似乎不知道...

如何原子更新 mobx observables？

我有一个商店 myStore，它有一个 main 方法，它调用多个在 mobx 中设置 observale 值的方法。我的问题是我想在所有

在 React useMemo 中使用 mobx 存储中的方法

我有一个 MobX Store，其中包含用户角色信息和验证角色的方法： 类商店{ 构造函数（）{ 使自动观察（这个） } 作用： string = "&quo...