标签: mobx-react

我有一个 RN (0.44.2) mobx(3.1.10) 应用程序，它使用FlatList. 我基本上遵循https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

当使用我自己的商店时，与示例相反，我必须使用它toJS()才能渲染 FlastList

    // renders list
    <FlatList
      data={this.props.giphyStore.images.toJS()}
      keyExtractor={(_, i) => i}
      renderItem={({ item }) => <Text>found the data</Text>}
    />

    // does not render list
    <FlatList
      data={this.props.giphyStore.images}
      keyExtractor={(_, i) => i}
      renderItem={({ item }) => <Text>did not find the data</Text>}
    />

我真的很难弄清楚为什么toJS()在某些情况下可能需要而不是在其他情况下。

我的商店正在设置可观察的图像，如下所示

async getImageList(query: string) {
  try {
    const requestURL = `${constants.GIPHY_ENDPOINT}${query}`
    const response = await axios.get(requestURL);
    const imgs = response.data.data.map((item) => {
      return { id: …

我在使用 MobX 操作切换布尔 observable 时遇到问题。该消息似乎表明当我只是尝试将其从 false 切换为 true 时，我正在尝试添加该属性：

TypeError: Cannot add property text_copied_message, object is not extensible
src/stores/ui_store.js:54
  51 | }
  52 | 
  53 | change_copy_message_state () {
> 54 |     this.text_copied_message = true;

这是操作：

change_copy_message_state () {
    this.text_copied_message = true;

    window.setTimeout(() => {
        this.text_copied_message = false;
    }, 5000);
}

这是调用操作的组件代码：

<CopyToClipboard text={ui_store.final_text_message}>
    <Button
        size='huge'
        color='orange'
        onClick={ ui_store.change_copy_message_state }
    >
        Copy Text and Open Social Media Sites in New Tabs
    </Button>
</CopyToClipboard>

谁能告诉是什么导致了这个问题？

目前我正在使用 mobx <Provider store={store} />，其中 store 包括所有具有可观察对象的 mobx 存储类。

在组件内部我使用

@inject("store")
@observe
class MyComponent ....

但这意味着，如果我只想访问通知存储，我必须使用this.props.store.notification.message它，例如，这变得非常冗长。有没有办法只获取通知存储？当我们注入一个字符串"store"而不是对象时，我看不到破坏它的方法。

自从 Mobx 3.6 上次更新到 Mobx 4 以来，我的应用程序就停止工作了。我正在使用react-native，并且只是按照说明迁移到最新功能，但我的应用程序不断崩溃，显示以下错误：

[mobx] 有多个活动的 mobx 实例。这可能会导致意外结果：有关详细信息，请参阅https://github.com/mobxjs/mobx/issues/1082。

点击这里查看错误图片

Mobx 商店：

我刚刚创建了一个简单的可观察对象，代码如下：

import React, { Component } from "react";

import { observable } from "mobx";

const ProductsStore = observable.object(
  {
    selectedProduct: null,
    products: [
      {
        id: 1,
        name: "NVIDIA 1050TI",
        desc: "4GB OC",
        model: "ASUS",
        price: 1050,
        quantity: 1
      },
      {
        id: 2,
        name: "NVIDIA 1060TI",
        desc: "6GB OC",
        model: "EVGA",
        price: 1050,
        quantity: 1
      },
      {
        id: 3,
        name: "NVIDIA 1070TI",
        desc: "8GB OC", …

我正在关注文档，mobx-react-router但是尝试运行我的应用程序时，在浏览器中出现以下错误：

Uncaught TypeError: An element descriptor's .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "undefined"
    at _toElementDescriptor (app.js:49988)
    at _toElementFinisherExtras (app.js:49990)
    at _decorateElement (app.js:49980)
    at app.js:49976
    at Array.forEach (<anonymous>)
    at _decorateClass (app.js:49976)
    at _decorate (app.js:49958)
    at Module../src/App/UserStore.js (app.js:50012)
    at __webpack_require__ (bootstrap:19)
    at Module../src/index.js (index.js:1)

这是我初始化的方式：

const appContainer = document.getElementById('app');
if(appContainer) {
  const browserHistory = createBrowserHistory()
  const routingStore = new RouterStore();

  const stores = {
    users: userStore,
    routing: routingStore
  } …

我正在从两个文件夹创建 React Web 应用程序，应用程序内的动态路由返回这些错误。静态路由工作得很好。我收到错误： Uncaught SyntaxError: Unexpected token '<' manifest.json:1 Manifest: Line: 1, column: 1, Syntax error。

import React, { Component } from 'react';
import './NavBar.css';
import Axios from 'axios';
import { observer } from 'mobx-react';
import UserStore from '../../src/Stores/UserStore';

class NavBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            results: {},
            apiLoading: false,
            message: ''
        };
    }

    async componentDidMount() {
        try{ //check if the user is logged in
            let res = await fetch('/isLoggedIn', { 
                method: 'post',
                headers: { …

首先，我不是经验丰富的React开发人员。只是让你知道。

我有一家商店：

import {observable, action, reaction, computed, autorun} from 'mobx';
import scrollTo from 'react-scroll-to-component'

ActivePostsStore类{

  @observable _posts = new Map()
  @observable _visiblePosts = new Set()

  @computed get visiblePosts() {
    return this._visiblePosts
  }

  @action
  addPost(uuid, ref) {
    // console.log('add post')
    this._posts.set(uuid, ref)
  }

  @action
  scrollToPost(uuid) {
    // console.log('scroll to post')
    scrollTo(this._posts.get(uuid), {})
  }

  @action
  addVisiblePost(uuid) {
    console.log('add vis post', this._visiblePosts.values())
    this._visiblePosts.add(uuid)
  }

  @action
  removeVisiblePost(uuid) {
    console.log('rem vis post', this._visiblePosts.values())
    this._visiblePosts = new Set([...this._visiblePosts].filter(el => el !== uuid))
  }

  // reacts = …