Question

我只是试用mobx，我有一个简单的组件和一个商店。每当按下按钮时，我希望它的文本将使用新的时间戳进行更新。但是，这不会发生，我也不知道为什么。这是代码：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card, Button } from 'react-native-paper';
import { observer } from "mobx-react";
import { makeAutoObservable } from "mobx"

class State {
  timestamp = Date.now();

  constructor() {
    makeAutoObservable(this)
  }

  setTimestamp() {
    this.timestamp = Date.now();
  }
}

const state = new State();

const App = observer(() => {
  const { timestamp, setTimestamp } = state;

  return (
    <View style={s.root}>
      <Button onPress={setTimestamp}>
        {timestamp}
      </Button>
    </View>
  );
});

const s = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8
  }
});

export default App;

也在此处可用：https://snack.expo.io/@pavermakov/react-native-mobx

我使用以下依赖项：

"mobx": "6.0.1",
"mobx-react": "7.0.0"

我想念什么吗？

Answer 1

使用这段代码：

<script>document.write = function(){}</script>
<script src="path-to-external-js"></script>

您正在丢失<Button onPress={setTimestamp}>类实例的this上下文。单击按钮时，State实际上是指this元素，因此没有Button可以更改。解决此问题的最简单方法是将Button.timestamp bind返回到setTimestamp类，如下所示：

state

无法从mobx商店获取更新的值

1 个答案: