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

Question

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

如果我可以获取设备方向数据，那么我就无法获取 API 数据（我认为当我可以获取设备方向数据时，服务器不是运行） , 当服务器运行时，我无法获取设备方向数据。由于服务器是用HTTP发送数据的，不是https，所以我在本地服务器上试了一下，还是不行。似乎在使用 react hooks 和 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

我认为你真的很接近，但我会做一些不同的事情。首先，我将整个位置作为一个状态：

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

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

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

下面说明了这些变化。

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

let isMounted = true
React.useEffect(() => {
    const handleOrientation = e => setAlpha(e.alpha)
    window.addEventListener("deviceorientation", handleOrientation, true)
    updateDevicePosition() //make rest call on mounting

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

async function updateDevicePosition() {
    try {
        const result = await fetch("http://192.168.10.233:34599/")
        const data = await result.json()
        if (isMounted) { //so you aren't setting state on an unmounted component
          setDevicePosition({
            centerX: data[0].x,
            centerY: data[0].y,
            deviceX1: data[1].x,
            deviceY1: data[1].y,
            deviceX2: data[2].x,
            deviceY2: data[2].y,
          })
       }
    } catch (e) {
        console.error(e)
    }
    if (isMounted) {
      clearTimeout(timer)
      setTimer(setTimeout(updateDevicePosition, 200))
    }
}

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

Device orientation data and fetching external API json data seems clashing. How can I fix it?

javascript

reactjs

mobile

framerjs