我有一个 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>

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

我在 Reactjs 使用 Typescript 创建了一个对象。
下面有一个代码。
但是它会在从密码到姓氏的 UserInformation 数据中出现此错误。
你能给我一些建议吗？

重复字符串索引签名

import { observable, action } from 'mobx';

export interface ISignStore {
  email: string,
  password: string,
  firstName: string,
  lastName: string,
  handleInput(e: any): void,
  handleSubmit(e: any): void
}

export class SignStore implements ISignStore {
  @observable
  UserInformation: {
    [email: string]: '',
    [password: string]: '',
    [firstName: string]: '',
    [lastName: string]: ''
  };

  @action
  handleInput = (e: any): void => {
    [e.target.id] = e.target.value;
  };

  @action
  handleSubmit = (e: any): void => {
    e.preventDefault(); …

嗨，我得到了简单的 observable 测试加载状态。

abstract class _AccountStore with Store {
  @observable
  bool loadingButtonStatus = false;


  @observable
  bool get loading => loadingButtonStatus;


  @action
  Future updateAccount(formData) async {
    loadingButtonStatus = true;

    Future.delayed(Duration(milliseconds: 2000)).then((future) {
      loadingButtonStatus = false;
    }).catchError((e) {
      loadingButtonStatus = false;
      print(e);
    });
  }
}

这是我的小部件

AccountStore store = AccountStore();

Observer(
  name: 'loading_button',
  builder: (_) => LoadingButton(
        loading: store.loading,
        text: Text('Save'),
        onPressed: () {
          store.updateAccount({});
        },
))

但每次我运行代码时，它总是返回给我： There are no observables detected in the builder function

我试过改变用途store.loadingButtonStatus还是一样。

任何解决方案？

谢谢。

我有一个黑暗模式组件，它是太阳和月亮图标之间的简单切换。

暗模式.tsx

import { observer } from 'mobx-react'
import { MoonIcon, SunIcon } from '@heroicons/react/solid'

import { useStore } from '@/store/index'

export const DarkMode = observer(() => {
    const { theme, setTheme, isPersisting } = useStore()

    if (!isPersisting) return null

    return (
        <>
            {theme === 'dark' && (
                <button
                    className="fixed bottom-12 right-12 focus:outline-none"
                    title="Activate light mode"
                    onClick={() => {
                        setTheme('light')
                    }}
                >
                    <MoonIcon className="w-8 h-8" />
                </button>
            )}
            {theme === 'light' && (
                <button
                    className="fixed bottom-12 right-12 focus:outline-none"
                    title="Activate dark …

错误错误：[mobx-state-tree] 期望 mobx-state-tree 类型作为参数 1，但未定义错误不变违规：模块 AppRegistry 不是已注册的可调用模块（调用 runApplication）。导致该错误的常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也可能会发生这种情况。错误不变违规：模块 AppRegistry 不是已注册的可调用模块（调用 runApplication）。导致该错误的常见原因是应用程序入口文件路径不正确。当 JS 包损坏或加载 React Native 时出现早期初始化错误时，也可能会发生这种情况。

当我用它的商店创建新模型并且我试图在商店根目录中声明它时会发生这种情况，但我收到了此错误（我的模型代码没有任何错误）

MobX 网页教程确实很难读完。有人能用简单的英语向我解释为什么当 React 已经有了状态管理系统时 MobX 很有用吗？

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

在组件内部我使用

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

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

我明白了:

错误:[mobx-state-tree]期望一个mobx-state-tree类型作为第一个参数,得到类HubConnection {constructor(urlOrConnection,options = {}){options = options || {};

尝试这样做时:

import { HubConnection } from '@aspnet/signalr-client';
.model('MyStore', {
  connection: types.optional(HubConnection, new HubConnection('http://localhost:5000/myhub')),
})

我可以在我的React组件的构造函数中声明它,而不是像以前那样

constructor(props){
  super(props);
  this.connection = new HubConnection('http://localhost:5000/myhub');
}

但是,所有附加的事件处理程序也需要在组件中定义

componentDidMount(){
  this.connection.on('Someaction', async(res: any) => {});
}

并开始/关闭连接

handleBtnClicked = () => {
  this.connection.start().then(() => self.connection.invoke('Someotheraction'));
}

理想情况下,我认为这属于模型和模型动作,因此反应组件仅触发对模型的操作,仅此而已.

有没有办法在mobx-state-tree模型中存储除mobx-state-tree类型之外的其他方法,你能以某种方式将它包装在mobx类型中,或者这实际上不是属于mobx的东西,因此故意.

我正在关注文档，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
  } …