Props 在 React 初始化时未定义。为什么？

Question

我正在使用 React 360 创建一个 VR 应用程序。我想要做的是最终创建一个应用程序，如此处所示 Facebook VR multi surface example。我正在使用该示例的代码，并试图将其放入我的应用程序中。但是，我在对我的 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 的代码的每个部分硬编码为 earth 的值，但它仍然是未定义的。道具没有设置为我想要的值，我不确定为什么。有人可以帮我解释为什么会这样吗？我将不胜感激。

Answer 1

您似乎在渲染 ModelView 而不是 ConnectedModelView。

Props 在 React 初始化时未定义。为什么？

Props are undefined on React initialization. Why?

javascript

reactjs

react-360