Mobx не видит массив, как это исправить?

Question

[Siiiid_z]

В моем приложении есть класс, который называется ArticleStore, ниже то, что он содержит

import { makeAutoObservable } from "mobx";

class ArticleStore {

    constructor() {
        this._article = [];
        this._selectedCategory = {};
        this._category = [];
        makeAutoObservable(this);
    }

    setCategory(category){
        this._category = category;
    }

    setSelectedCategories(category){
        this._selectedCategory = category; 
    }

    setArticle(article){
        this._article = article;
    }

    get category() {
        return this._category;
    }

    get selectedCategory() {
        return this._selectedCategory;
    }
}

const articleStore = new ArticleStore();

export default articleStore;

Я использую MobX для изменения состояния
Этот Store я использую через Context Provider следующим образом:

const App = observer(() =>  {
  return (
    <div className="App">
      <Context.Provider value={{
        article: articleStore
      }}>
        <Routes>
            <Route path='/' element={<Layout/>}>
              <Route index element={<Article/>}/>
              <Route path='login' element={<Authorization/>}/>
              <Route path='registration' element={<Authorization/>}/>
              <Route path='admin' element={<Admin/>}/>
              <Route path='*' element={<NotFound/>}/>
            </Route>
        </Routes>
        </Context.Provider>
    </div>
  );
});

export default App;

И mobx не видит массив в компоненте, выдает ошибку:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Компонент, где я пытаюсь использовать массив

const {article} = useContext(Context);

const fetchCategories = async() => {
        getCategories().then(data => article.setCategory(data));
     }

    useEffect(() => {
        
        fetchCategories();
    }, [])

<Dropdown variant='outline'>
                    <Dropdown.Toggle>{article.selectedCategory.name || 'Выберите категорию'}</Dropdown.Toggle>
                    <Dropdown.Menu>
                        {article.category.map(c=> 
                                <Dropdown.Item
                                    key={c.id}
                                    onClick={() => article.setSelectedCategory(c)}
                                >
                                    {c.name}
                                </Dropdown.Item>
                        )}
                    </Dropdown.Menu>

</Dropdown>

Возможно я не совсем понятно задал свой вопрос, но почему MobX не видит массив category?

Comments

[Gary_Ihar]

Да вроде норм все. А тебе данные норм фетчатся ? Мож тебе там undefined приходит

Answer 1

[kfedechkin]

class ArticleStore {
     #article = [];
     #selectedCategory = {};
     #category = [];

    constructor() {
        makeAutoObservable(this);
    }

    setCategory(category){
        this.#category = category;
    }

    setSelectedCategories(category){
        this.#selectedCategory = category; 
    }

    setArticle(article){
        this.#article = article;
    }

    get category() {
        return this.#category;
    }

    get selectedCategory() {
        return this.#selectedCategory;
    }
}

Comments

[Siiiid_z]

private может использоваться только в TypeScript

[Евгений Журов]

Siiiid_z, нет, в js тоже можно.

Что касается вашего вопроса, то возможно вот это поможет, в частности, вызов makeAutoObservable c аргументами this, {}, {autobind: true}.