时间戳

首页 > 解决方案 > Javascript：类更改不重新呈现

javascript - Javascript：类更改不重新呈现

问题描述

我正在尝试使用钩子在 React Native 上的地图上更新我的标记坐标，但我不熟悉 Java 脚本及其工作方式。除非我退出并重新进入屏幕，否则坐标会更新但不会反映在地图上（标记不会移动到新坐标），但我希望它在设置新坐标时自动更新。我曾尝试使用 render() 但由于某些错误（函数作为 React 子级无效）而无法正常工作。有没有办法强制渲染或替代可用于这种情况的 React Native 的钩子？

可以使用 setxCord 和 setyCord 设置标记 x,y 坐标 

      <MapboxGL.MarkerView coordinate={[xCord, yCord]} anchor={{x: 0, y: 0}} draggable={false}>

我试过这样做

// to update new position for marker
export class Position {
  constructor(x,y) {
    this.x = 5;
    this.y = 5;
  }
  getX() {
    return this.x;
  }

  setX(x) {
    this.x = x;
  }

  getY() {
    return this.y;
  }

  setY(y) {
    this.y = y;
  }

  setCoordinates(x,y) {
    var dx = x * 0.12 * 6.24 / 7.8 + 1.96;
    var dy = y * 0.12 * 9.55 / 12 + 0.35;
    this.x = dx;
    this.y = dy;
  }
}

const createScanHandler = () => {
  console.log(position);
  position.setCoordinates(32.5, 67.5);
}

let position = new Position();

我也尝试过使用 .bind() 但它没有用。我还研究了如何使用 componentDidMount 来更新坐标，但我不知道如何使用它，因为我不熟悉 React 和 JS。

任何帮助是极大的赞赏。先感谢您。

标签： javascriptreact-nativemapbox

解决方案

尝试将您的坐标存储在：

const [coordinate, setCoordinate] = React.useState(/* here you object or array */);

如果您看到链接React 生命周期方法。你会看到在改变 props 和 state 之后调用了什么 render()。

另见官方文档。

推荐阅读