Помощь в понимании того, почему мое состояние React не обновляется

Я создаю проект реагировать на 360 (ранее реактив), используя MobX. У меня была такая боль при настройке Redux, что я решил использовать MobX для простоты. То, что я пытаюсь воссоздать, - это проект, представленный в этом видео на YouTube. Презентация React VR 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 обновляется, но к нему, похоже, не обращаются правильно. Может ли кто-нибудь помочь направить меня в правильном направлении. Некоторая помощь будет оценена.

0 ответов

Другие вопросы по тегам