反应原生 + mobx 不重新渲染答案

【问题标题】：React native + mobx dont re render反应原生 + mobx 不重新渲染
【发布时间】：2019-08-09 01:24:26
【问题描述】：

我目前正在使用 react native 和 mobx 构建应用程序。我的问题是，在商店中的可观察值发生更改后，组件不会重新渲染。我的代码如下所示：

组件/phoneNumberChange.js：

@inject('store')
@observer export class PhoneNumberChange extends React.Component{
renderPhoneInput = () => (
  <React.Fragment>
    <Button onPress={() => this.props.store.showCountryPicker()}>
      <Text>Show picker</Text>
    </Button>
  </React.Fragment>
);

render = () => (
  <React.Fragment>
    <CountryCodePicker visible= {this.props.store.pickerVisible}/>
  </React.Fragment>
);
}

screens/loginScreen.js：

import { Provider } from "mobx-react";
import { store } from "stores/phoneNumberChangeStore.js";
import { PhoneNumberChange } from "components/phoneNumberChange.js";

export class LoginScreen extends React.Component{

render = () => (
  <Provider store={store}>
    <PhoneNumberChange/>
  </Provider

);

}

商店/phoneNumberChangeStore.js：

import { observable, action } from "mobx";

class PhoneNumberChangeStore {
  @observable pickerVisible;

  constructor(){
    this.hideCountryPicker();
  }
  @action hideCountryPicker = () => {
    this.pickerVisible = false;
  }
  @action showCountryPicker = () => {
    this.pickerVisible = true;
  }

}
export const store = new PhoneNumberChangeStore();

babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]
  };
};

package.json:

{
  "name": "myapp",
  "main": "app/app.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-native": "^4.0.1",
    "expo": "^32.0.0",
    "mobx": "^5.9.0",
    "mobx-react": "^5.4.3",
    "prop-types": "^15.7.2",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-animatable": "^1.3.1",
    "react-native-ui-kitten": "^3.1.2",
    "react-navigation": "^3.3.2"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

当可见属性改变时，countryCodePicker 是否显示。这是有效的。但是当我从商店更改一个值时，它不会更新并显示出来。我将不胜感激！

干杯

【问题讨论】：

标签： reactjs react-native mobx mobx-react

【解决方案1】：

您在phoneNumberChangeStore.js 中将您的商店单例导出为default，但您在loginScreen.js 中导入命名导出PhoneNumberChangeStore。

改用loginScreen.js 中的default 导出。 store 属性也称为pickerVisible，而不是countryCodePickerVisible。

【讨论】：

嘿，感谢您的快速答复！我现在使用： export const store = new PhoneNumberChangeStore();并使用导入它： import {store} from ...;它仍然无法正常工作。这些属性在我的代码中是正确的，这只是将代码复制到这个线程时的一个错字。
@wannabe_informatiker 不客气！好的，请更新您的问题以删除拼写错误。
@wannabe_informatiker 很难说它可能是什么。 It works for me on the web.
哦，太糟糕了！还是谢谢你！

【解决方案2】：

找到了解决方案！我在实例上重新定义了渲染。

我把render = () => {..}改成了render(){ return (...); }

干杯！

【讨论】：