Question

我正在使用mobx并使钩子相互反应。我有一个useContext来获取商店功能

const store = useContext(MyStore)
useEffect(() => {
        if (init !== '') {
            store.loading = true;
            store.bulkApprove(init).then(data => {
                store.unCheckAll();
            });
        }
    }, [init]);

我可以看到类似下面的警告

 React Hook useEffect has a missing dependency: 'store'. Either include it or remove the dependency array

我真的很困惑，为什么我需要在依赖项数组中包括商店

Answer 1

0 1 2 3 0 0.357169 0.442365 0.569691 0.321225 1 0.336422 0.530320 0.505476 0.410900 2 0.391133 0.581999 0.522609 0.694121 3 0.227375 0.521012 0.549536 0.656963 4 0.271649 0.595682 0.430994 0.287333 .. ... ... ... ... 95 0.385812 0.478079 0.599705 0.631283 96 0.214605 0.568494 0.488586 0.696451 97 0.329692 0.401601 0.514235 0.662928 98 0.229644 0.462015 0.543876 0.909954 99 0.373864 0.529524 0.454594 0.713829 [100 rows x 4 columns]只是意味着linter警告您，您的依赖项依赖于可能会更改的外部值。

React Hook useEffect has a missing dependency: <dep>. Either include it or remove the dependency array已订阅上下文store。表示它正在跟踪其更改。

Answer 2

如果您要使用Mobx和钩子，请尝试遵循Mobx模式：

https://mobx-react.js.org/state-local#what-about-global-store

https://mobx-react.js.org/observer-hook

Answer 3

万一有人还在寻找，我在youtube上找到了可行的解决方案

https://www.youtube.com/watch?v=0FS3pJa6rME

基本上，您可以用上下文包装存储，然后将函数包装在观察器中。这个解决方案绕开了我发现自己的语法地狱。

我的商店如下：

mywebsite

使用商店的简单textField看起来像这样：

   import { observable, decorate, action } from "mobx";
   import { createContext } from "react";
   class NewsFormStore {
     formValues = [];
     onChange = (name, value) => {
       this.formValues[name] = value;
     };
   }
   decorate(NewsFormStore, {
     formValues: observable,
     onChange: action
   });

   export const store = new NewsFormStore();
   export const StoreContext = createContext(store);

React Hook useEffect缺少依赖项-Mobx

3 个答案: