Реквизиты не определены при инициализации React. Почему?

Я создаю приложение VR с помощью React 360. Я пытаюсь в конечном итоге создать приложение, как показано здесь Пример мультиповерхности Facebook VR. Я беру код для этого примера и пытаюсь вписать его в свое приложение. Однако у меня возникла проблема со следующей инициализацией моих компонентов React.

У меня есть следующее приложение react-360 со следующим кодом index.js

import React from 'react';
import connect from './Store';

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

import Entity from 'Entity';


const ModelView = props => {

  *********** Problem **************
  Why are my props undefined if I am declaring it in the wrapper?
  **********************************

  return (
    <Entity
      style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
      source={{obj: asset(`${props.planetName}.obj`), mtl: asset(`${props.planetName}.mtl`)}}
    />
  );
};

const ConnectedModelView = connect(ModelView);
export default ConnectedModelView;

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

Из приведенного выше кода мои реквизиты для ModelView не должны быть неопределенными. При инициализации он должен иметь значение earth.

Реквизит должен быть инициализирован в Store.js. Вот код ниже:

import React from 'react';

const State = {
  planetName: 'earth'
};

const listeners = new Set();

export default function connect(Component) {
  return class Wrapper extends React.Component {
    state = {
      planetName: State.planetName
    };

    _listener = () => {
      this.setState({
        planetName: State.planetName
      });
    };

    componentDidMount() {
      listeners.add(this._listener);
    }

    componentWillUnmount() {
      listeners.delete(this._listener);
    }

    render() {
      return (
        <Component
          {...this.props}
          planetName={this.state.planetName}
        />
      );
    }
  };
}

Взяв страницу из кода facebook, я инициализирую представление модели с помощью метода Store.connect. Этот метод создает оболочку вокруг ModelView, где я устанавливаю реквизиты через State.planetName. Тем не менее, я продолжаю получать неопределенность, и я не знаю, почему. Я жестко запрограммировал каждую часть кода, в которой State.planetName соответствует значению земли, и оно все еще не определено. Для реквизита не установлено значение, которое я хочу, и я не уверен, почему. Может ли кто-нибудь помочь мне с тем, почему это может быть так? Буду признателен за помощь.


person Dan Rubio    schedule 21.12.2018    source источник


Ответы (1)


Похоже, вы визуализируете ModelView, а не ConnectedModelView.

person Colin Ricardo    schedule 21.12.2018
comment
спасибо за Ваш ответ. Я отмечу это правильно через некоторое время, так как это сработало, но не могли бы вы мне что-нибудь ответить. В коде facebook, найденном здесь (github.com/facebook/react-360 /tree/master/Samples/MultiRoot) в файле TopPosts.js, я более или менее следую той же схеме, но нигде в этом коде ConnectedTopPosts не импортируется. Как он тогда может работать? Я не знаю, насколько вы разбираетесь в react-360, но если у вас есть понимание, я хотел бы знать. Спасибо. - person Dan Rubio; 21.12.2018
comment
@DanRubio ... Он не импортируется, он создается и экспортируется. Он импортирован в index.js -- import TopPosts from './TopPosts' - person Dave Newton; 21.12.2018
comment
Хорошо, похоже, мне нужно будет прочитать import/export для ES6, я бы подумал, что это будет import ConnectedTopPosts from './TopPosts', потому что мне пришлось изменить AppRegistry.registerComponent('ModelView', () => ModelView); на AppRegistry.registerComponent('ConnectedModelView', () => ConnectedModelView); Спасибо. - person Dan Rubio; 21.12.2018