Question

我正在尝试获取设备方向数据并使用react钩子获取API数据，但这似乎发生了冲突。

如果我可以获取设备方向数据，那么我就无法获取API数据（我想当我可以获取设备方向数据时，服务器未运行），而当服务器运行时，我无法无法获取设备方向数据。由于服务器是通过HTTP发送数据，而不是https，因此我在本地服务器上尝试了它，但仍然无法正常工作。似乎在使用react挂钩和useEffect时存在问题，但不确定。

const [alpha, setAlpha] = React.useState(0.0)

React.useEffect(() => {
    const handleOrientation = e => setAlpha(e.alpha)
    window.addEventListener("deviceorientation", handleOrientation, true)

    return () => {
        window.removeEventListener("deviceorientation", handleOrientation)
        }
}, [])

const [centerX, setCenterX] = React.useState(0.0)
const [centerY, setCenterY] = React.useState(0.0)
const [deviceX1, setDeviceX1] = React.useState(0.0)
const [deviceY1, setDeviceY1] = React.useState(0.0)
const [deviceX2, setDeviceX2] = React.useState(0.0)
const [deviceY2, setDeviceY2] = React.useState(0.0)

const [timer, setTimer] = React.useState(null)
const [isMounted, setIsMounted] = React.useState(false)

async function updateDevicePosition() {
    try {
        const result = await fetch("http://192.168.10.233:34599/")
        const data = await result.json()
        setCenterX(data[0].x)
        setCenterY(data[0].y)
        setDeviceX1(data[1].x)
        setDeviceY1(data[1].y)
        setDeviceX2(data[2].x)
        setDeviceY2(data[2].y)
    } catch (e) {
        console.error(e)
    }
    clearTimeout(timer)
    setTimer(setTimeout(updateDevicePosition, 200))
}

React.useEffect(() => {
    if (!isMounted) {
        updateDevicePosition()
        setIsMounted(true)
    }
})

获取所有数据后，我希望计算出设备的位置和方向。

Answer 1

我认为您真的很亲密，但是我会做一些不同的事情。首先，我会将整个职位设为单一状态：

glutStrokeString

第二，我将从状态中删除isMounted组件。您不想使用状态来确定是否应更新状态。您可以在未安装的组件上更新isMounted。

第三，我将删除在每个渲染器上调用的useEffect。您几乎不需要在每个渲染上都进行其余调用。根据代码，我认为您想在第一个渲染上进行调用，然后设置一个计时器。

下面说明了这些更改。

const [devicePosition, setDevicePosition] = React.useState({
  centerX: 0.0,
  centerY: 0.0,
  deviceX1: 0.0,
  deviceY1: 0.0,
  deviceX2: 0.0,
  deviceY2: 0.0,
})

设备方向数据和获取外部API json数据似乎冲突。我该如何解决？

1 个答案: