Question

我正在使用MobX创建一个React 360（以前称为reactvr）项目。我对Redux的设置感到非常痛苦，为了简单起见，我选择使用MobX。我要重新创建的是此youtube视频React VR presentation 2017中介绍的项目。

对于JS和VR领域，我还是一个相对较新的人，正在尝试做出反应，特别是像Redux和Mobx这样的状态管理库。现在进入代码。 index.js中有以下内容：

import React from 'react';
import { decorate, observable, computed } from "mobx";
import { observer } from 'mobx-react';

import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
} from 'react-360';

import Entity from 'Entity';

export default class PlanetMenu extends React.Component {
  planetName = '';

  get selectedPlanetModel() {
    return this.planetName;
  }

  select(planet) {
    this.planetName = planet;
  }

  render() {
    return (
      <View style={styles.panel}>

        <View>
          <VrButton
            style={styles.buttonStyle}
            onClick={() => this.select('earth')}>
            <Text style={styles.planetName}>Earth</Text>
          </VrButton>

          <VrButton
            style={styles.buttonStyle}
            onClick={() => this.select('saturn')}>
            <Text style={styles.planetName}>Saturn</Text>
          </VrButton>
        </View>

      </View>
    );
  }
};

decorate(PlanetMenu, {
  selectedPlanetModel: computed
})

decorate(PlanetMenu, {
    planetName: observable,
})

export class ModelView extends React.Component {
  render() {
    return (
      <Entity
        style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
        source={{obj: asset(`${PlanetMenu.selectedPlanetModel}.obj`), mtl: asset(`${PlanetMenu.selectedPlanetModel}.mtl`)}}
      />
    );
  }
};

AppRegistry.registerComponent('PlanetMenu', () => PlanetMenu);
AppRegistry.registerComponent('ModelView', () => ModelView);

我所拥有的基本上是两个按钮，当单击它们时将动态渲染选定的行星3D模型。但是，它没有按预期工作。

在我的ModelView类中，包含${PlanetMenu.selectedPlanetModel}.obj的行被内插为'undefined.obj'。我想知道为什么会这样吗？ planetName中的PlanetMenu变量正在更新，但似乎无法正确访问。有人可以帮我指出正确的方向吗？一些帮助，将不胜感激。

帮助理解为什么我的React状态没有更新

0 个答案: