Помощь в понимании того, почему мое состояние React не обновляется - PullRequest
0 голосов
/ 20 декабря 2018

Я создаю реактивный проект 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 обновляется, но, кажется, к ней не обращаются правильно.Может ли кто-нибудь помочь направить меня в правильном направлении.Была бы признательна за помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...