Reactjs 使用效果不一致

该组件正在三维场景中创建位置音频，并且音频对象可以使用leva进行调整。该对象正在按其应有的方式创建，调整位置和旋转效果良好。无法正常工作的是更改音量。在leva UI中，我可以拖动卷的句柄，对其进行更改，但不会产生任何效果（我假设这是因为useEffect在释放句柄之前触发，并且实际上尚未对值进行任何更改。在释放句柄之前，至少会显示控制台日志）。当我在输入字段中输入新值时，按enter useEffect会触发，音量也会改变。但它只在这一次起作用，之后就不再起作用了

import * as THREE from 'three'
import React, { Suspense, useRef, useEffect, useState } from 'react'
import { useThree, useLoader } from '@react-three/fiber'
import { PositionalAudioHelper } from 'three/examples/jsm/helpers/PositionalAudioHelper.js'
import { useControls } from 'leva'

function Sound({ url, volume }) {
    const sound = useRef()
    const { camera } = useThree()
    const [listener] = useState(() => new THREE.AudioListener())
    const buffer = useLoader(THREE.AudioLoader, url)
    useEffect(() => {
        sound.current.setBuffer(buffer)
        sound.current.setRefDistance(1)
        sound.current.setRolloffFactor(0)
        sound.current.setDirectionalCone(180, 230, 0.1)
        sound.current.setLoop(true)
        sound.current.play()
        const helper = new PositionalAudioHelper(sound.current)
        sound.current.add(helper)
        camera.add(listener)
        return () => camera.remove(listener)
    }, [])
    useEffect(() => {
      sound.current.setVolume(volume)
  }, [sound.current])
    return (
        <positionalAudio ref={sound} args={[listener]} />
    )
}

export default function App({ url, position}) {
    const { posXRight, posYRight, posZRight, rotationYRight, volumeRight } = useControls({
        posXRight: {
          value: position[0],
          min: -20,
          max: 20,
          step: 1
        },
        posYRight: {
            value: position[1],
            min: -20,
            max: 20,
            step: 1
          },
        posZRight: {
            value: position[2],
            min: -20,
            max: 20,
            step: 1
        },
        rotationYRight: {
            value: 0,
            min: 0,
            max: Math.PI * 2,
            step: Math.PI * 0.25
        },
        volumeRight: {
            value: 1,
            min: 0,
            max: 1,
            step: 0.05
        }
      })
  return (
      <Suspense fallback={null}>
        <mesh position={[posXRight, posYRight, posZRight]} rotation={[0, rotationYRight, 0]}>
          <sphereGeometry args={[0.1, 32, 32]} />
          <meshStandardMaterial color="white" />
          <Sound url={url} volume={volumeRight} />
        </mesh>
      </Suspense>
  )
}

import*作为“三”中的三个
从“React”导入React，{suspent，useRef，useffect，useState}
从'@react three/fiber'导入{usetree，useLoader}
从'three/examples/jsm/helpers/positionaudiohelper.js'导入{positionaudiohelper}
从“leva”导入{useControls}
函数声音（{url，volume}）{
const sound=useRef（）
const{camera}=usetree（）
const[listener]=useState（（）=>new THREE.AudioListener（））
const buffer=useLoader（三个.AudioLoader，url）
useffect（（）=>{
声音.电流.设置缓冲区（缓冲区）
声音.电流.设置参考距离（1）
声音.current.setRolloffFactor（0）
声音.电流.设置方向锥（180，230，0.1）
sound.current.setLoop（真）
sound.current.play（）
const helper=新的位置音频助手（sound.current）
sound.current.add（助手）
添加（侦听器）
return（）=>camera.remove（侦听器）
}, [])
useffect（（）=>{
声音.当前.设置音量（音量）
}，[sound.current]）
返回(
)
}
导出默认函数App（{url，position}）{
const{posXRight，posYRight，posZRight，rotationYRight，volumeRight}=useControls({
posXRight：{
值：位置[0]，
最小：-20，
最高：20，
步骤：1
},
华丽的：{
值：位置[1]，
最小：-20，
最高：20，
步骤：1
},
波斯莱特：{
值：位置[2]，
最小：-20，
最高：20，
步骤：1
},
旋转光线：{
值：0，
分:0,，
max:Math.PI*2，
步骤：Math.PI*0.25
},
体积光：{
价值：1，
分:0,，
最高：1，
阶跃：0.05
}
})
返回(
)
}

---

此钩子在初始渲染时触发，每次

声音时都会触发。当前的
更改（可能永远不会更改）。您应该将其更改为
[volume]
是的，这就成功了。谢谢！
useEffect(() => {
    sound.current.setVolume(volume)
}, [sound.current])