javascript - React props 在事件处理程序中已过期

Question

我们正在构建一个 React-Redux Web 应用程序，它将显示多个三个 JS 场景。这些场景成对出现，每对都会同步缩放。为了实现这一点，我们将相机数据存储在 Redux 存储中。

这是我们的 React 类(深吸一口气，对于一个 SO 问题来说有点长)，它使用 react-three-renderer生成三个 JS 对象:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Vector3 } from 'three';
import React3 from 'react-three-renderer';
import ReferenceGrid from './ReferenceGridVisual';
import ResourceGroup from './resourceGroups/ResourceGroup';
import { initializeRayCastScene } from './viewportMath/RayCastScene';
import zoomCamera from './viewportMath/CameraZoom';
import { registerCamera, zoom } from './actions/cameraActions';
import { InitThreeJsDomEvents, UpdateDomCamera } from './domUtility/ThreeJSDom';

class ThreeJsScene extends Component {
  constructor(props) {
    super(props);

    this.ZoomAmount = 150;
    this.ZoomMaxCap = 1000;
    this.ZoomMinCap = 6;
    this.zoomPadding = 10;
    this.minimumZoom = 45;
  }

  componentWillMount() {
    initializeRayCastScene();

    this.props.registerCamera(this.props.sceneName);
  }

  componentDidMount() {
    // eslint-disable-next-line no-underscore-dangle
    InitThreeJsDomEvents(this.camera, this.canvas._canvas);
  }

  onWheel = (event) => {
    // eslint-disable-next-line
    this.zoom(event.clientX, event.clientY, event.deltaY);
  }

  setCameraRef = (camera) => {
    UpdateDomCamera(camera);
    this.camera = camera;
  }

  zoom(screenPosX, screenPosY, zoomAmount) {
    const size = {
      width: this.props.width,
      height: this.props.height,
    };
    const result = zoomCamera(screenPosX, screenPosY, zoomAmount, this.camera.position,
      size, this.props.distance, this.camera, this.props.cameraType, this.ZoomMaxCap,
      this.ZoomMinCap);
    this.ZoomAmount = (result.ZoomAmount) ? result.ZoomAmount : this.ZoomAmount;
    this.props.zoom(this.props.sceneName, result.distanceChangeFactor, result.newCameraPosition);
  }

  render() {
    let position;
    if (this.props.cameraPosition != null) {
      position = new Vector3(
        this.props.cameraPosition.x,
        this.props.cameraPosition.y,
        this.props.cameraPosition.z
      );
    } else {
      position = new Vector3();
    }
    const left = -this.props.width / 2;
    const right = this.props.width / 2;
    const top = this.props.height / 2;
    const bottom = -this.props.height / 2;

    return (
      <div
        style={{ lineHeight: '0' }}
        onWheel={this.onWheel}
      >
        <React3
          width={this.props.width}
          height={this.props.height}
          mainCamera="camera"
          antialias
          pixelRatio={1}
          ref={(canvas) => { this.canvas = canvas; }}
        >
          <scene ref={(scene) => { this.scene = scene; }}>
            <orthographicCamera
              name="camera"
              left={left}
              right={right}
              top={top}
              bottom={bottom}
              near={0.01}
              far={1400}
              position={position}
              ref={this.setCameraRef}
            />
            <ambientLight
              color={0xaaaaaa}
            />
            <directionalLight
              color={0xaaaaaa}
              intensity={1.1}
              position={new Vector3(3, 4, 10)}
              lookAt={new Vector3(0, 0, 0)}
            />
            <ReferenceGrid xActive yActive zActive={false} store={this.props.store} />
            <ResourceGroup store={this.props.store}>
              {this.props.children}
            </ResourceGroup>
          </scene>
        </React3>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const ownCamera = state.cameras.get(ownProps.sceneName);
  if (ownCamera == null) {
    console.log('own camera null');
    return { cameraAvailable: false };
  }
  console.log('has own camera');
  const cameraPosition = ownCamera.position;
  const cameraType = ownCamera.type;
  const distance = ownCamera.distance;
  return {
    cameraAvailable: true,
    cameraPosition,
    cameraType,
    distance,
  };
};

const mapDispatchToProps = dispatch => ({
  registerCamera: (cameraName) => {
    dispatch(registerCamera(cameraName));
  },
  zoom: (cameraName, factor, newCameraPosition) => {
    dispatch(zoom(cameraName, factor, newCameraPosition));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(ThreeJsScene);

此外，作为引用，以下是操作创建者:

export const registerCamera = cameraName => (dispatch) => {
  dispatch({ type: 'REGISTER_CAMERA', newCameraName: cameraName });
};

export const zoom = (cameraName, factor, newCameraPosition) => (dispatch, getState) => {
  const state = getState();
  const zoomFactor = state.cameras.get(cameraName).distance * (1 - factor);
  dispatch({ type: 'CAMERA_ZOOM', cameraName, factor: zoomFactor, newCameraPosition });
};

还有 reducer :

import { Map } from 'immutable';

const defaultCameraProperties = {
  distance: 150,
  type: 'orthogonal',
  position: { x: 0, y: 10, z: 50 },
  rotation: { x: 0, y: 0, z: 0, w: 1 },
};

const initialState = Map();

export default (state = initialState, action) => {
  switch (action.type) {
    case 'REGISTER_CAMERA': {
      const newCamera = {
        ...defaultCameraProperties,
        ...action.newCameraProperties,
      };
      return state.set(action.newCameraName, newCamera);
    }

    case 'CAMERA_ZOOM': {
      const updatedDistance = action.factor;
      const updatedCameraPosition = {
        ...state.get(action.cameraName).position,
        ...action.newCameraPosition,
      };
      const updatedCamera = {
        ...state.get(action.cameraName),
        position: updatedCameraPosition,
        distance: updatedDistance,
      };
      return state.set(action.cameraName, updatedCamera);
    }

    default: {
      return state;
    }
  }
};

挑战在于 React 类中的 zoom 函数，React props 不是我所期望的，因此缩放失败。以下是我所理解的相关事件顺序的摘要:

调用
1. componentWillMount，它调度REGISTER_CAMERA方法。 (我们这样做而不是默认在商店中保存相机数据，因为这些场景对是动态生成的 - 它们的数量不是静态的。)
2. 调用 React render 方法。
3. 由于 REGISTER_CAMERA 操作现在已经修改了存储并且我们有了新的 Prop ，因此再次调用 React render 方法 - 与相机相关的 Prop 现在可用。
4. 我用鼠标滚轮触发缩放。 onWheel 处理程序调用 zoom 函数，但该方法中的断点显示与相机相关的 Prop - 例如 this.props.cameraType - 是 未定义。 React props 的显示方式与 2 中的一样。(zoomCamera 进行了一些计算。由于这些属性不可用，缩放失败。)

我不明白这是为什么。我怀疑我误解了 this 上下文与缩放方法的绑定(bind)。

简而言之，我的问题是为什么我的 props 不是最新的以及如何使更新的版本可用于 zoom 功能？

Answer 1

事实证明，这是热模块重新加载时出现的错误。冷运行我们的构建不会出现这个问题。