Question

我有一个简单的状态，并且在useEffect中运行了一个函数，我将useEffect第二个参数设置为我的更新状态，但似乎在无休止的循环中运行导致无休止的重新呈现

const [file, setFile] = useState({audioFile: {} })

  const loadAudioFromPath = (path) => {
    import(`../components/Media/Resources/${path}`).then(audio =>
      setFile({
        audioFile: new Audio(audio),
      })
    );
  }

   useEffect(() => {
     loadAudioFromPath(resourceURI)
     console.log(file)
   }, [file])

我也尝试过

 useEffect(() => {
         loadAudioFromPath(resourceURI)
         console.log(file)
       }, [])

还是同样的问题！

Answer 1

编辑：尝试将您的useEffect更改为以下内容：

基本上，添加一个布尔值。如果布尔状态更改，则将触发useEffect。

const [file, setFile] = useState({audioFile: {} })
const [bool, setBool] = useState(false)

  const loadAudioFromPath = (path) => {
    import(`../components/Media/Resources/${path}`).then(audio =>
      setFile({
        audioFile: new Audio(audio),
      })
    if (file.length !== 0) {
      setBool(true)
     }

    );
  }

   useEffect(() => {
     loadAudioFromPath(resourceURI)
     console.log(file)
   }, [bool])

Answer 2

useEffect(() => {
   loadAudioFromPath(resourceURI)
   console.log(file)
}, [])

Answer 3

代码中必须还有其他一些问题，

send_channel_entry

仅在加载组件时渲染一次。如果您为问题添加了更多纹理，很高兴研究代码的其余部分。

Answer 4

受特尔玛博士的启发，我通过将promise的结果置于一个单独的状态，然后使用它来创建一个新的Audio并将其设置为另一个状态来修复了它

 const [file, setFile] = useState({audioFile: {} })
  const [comp, setComp] = useState({audioComp: {} })


  useEffect(() => {
    import(`../components/Media/Resources/${resourceURI}`).then(audio =>
      setComp({
        audioComp: audio.default,
      })
    ).then(()=>
    setFile({
      audioFile: new Audio(comp.audioComp),
    })
    )
  }, [])

Answer 5

这很令人遗憾，因为您正在监视文件更改，并且您正在useEffect内使用setFile对文件进行更改，所以就进行了循环。

因此，为了帮助您更多，我需要知道您实际上在尝试使用该文件实现什么。

1-如果您尝试在上传文件后立即加载文件，则可以尝试以下操作：

const { file, setFile } = useState();
const { resourceURI, setResourceURI } = useState();

useEffect(() => {
    loadAudioFromPath(resourceURI)
}, [resourceURI])


const loadAudioFromPath = (path) => {
    import(`../components/Media/Resources/${path}`).then(audio =>
      setFile({
        audioFile: new Audio(audio),
      })
    );
  }

2-如果您尝试仅一次加载文件（在装入页面时）（如果更改文件，则什么也不做）：

const { file, setFile } = useState();

useEffect(() => {
    loadAudioFromPath(resourceURI);        
}, [])

const loadAudioFromPath = (path) => {
    import(`../components/Media/Resources/${path}`).then(audio =>
        setFile({
            audioFile: new Audio(audio),
        })
    );
 }

3-或者，如果您要在当前文件与上一个文件不同的情况下加载文件，则可以像我在该答案中所做的那样-> A property is undefined - switching from class components to function hooks components in React

useEffect导致无限循环

5 个答案: