Проблемы контекста с React и requestAnimationFrame - PullRequest
Новая
       38

Проблемы контекста с React и requestAnimationFrame

0 голосов
/ 24 октября 2018

Я сейчас играю с React и Three.js.Я пытаюсь вызвать функцию обновления, которая передается в качестве опоры другому компоненту, как показано ниже.Проблема в том, что я получаю сообщение об ошибке sayign this.cube не определено. 

 public renderer : THREE.WebGLRenderer;
  public scene : THREE.Scene = new THREE.Scene();
  public camera : THREE.PerspectiveCamera = new THREE.PerspectiveCamera(70, 400 / 300, 0.1, 0.1);
  public cube : THREE.Mesh;

  public componentDidMount() {
    const geometry = new THREE.BoxGeometry( 1, 1, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
  }

     public update = () => {
        console.log(this);
        console.log(this.cube);
        this.cube.rotation.x += 0.01;
        this.cube.rotation.y += 0.01;
      }

      public render() {

        const sceneArr : THREE.Scene[] = [];
        sceneArr.push(this.scene);

        return (
          <React.Fragment>
            <Three mainCamera={this.camera} width={400} height={300} update={this.update} scenes={sceneArr} />
          </React.Fragment>
        );
      }

Here is the render function inside the `Three` component calling `requestAnimationFrame`.

      public threeRender = () => {
        this.props.update();
        requestAnimationFrame(this.threeRender);
        this.props.scenes.forEach(scene => {
          this.renderer.render(scene, this.props.mainCamera);
        });
      }

Я предположил, что контекст this внутри update неправильно ссылается на компонент Three, но оказывается,что печатные заявления внутри update показали противоречивые доказательства.

console.log(this) возвращает правильный контекст объекта, и член куба отображается в журнале, но console.log(this.cube) возвращает неопределенное.Это не имеет смысла для меня.Есть идеи?

1 Ответ

0 голосов
/ 24 октября 2018

Внутри вашей constructor инициализируйте cube, и тогда вы сможете ссылаться на нее, не получая эту ошибку. 

constructor(props){
   this.cube = {}
}

Теперь вы можете дать this.cube значение и обратиться к немуизнутри update()

...