Reactjs useEffect仅将值推送到数组一次

所以基本上我开始学习ReactJs，并尝试构建一个聊天应用程序 现在这里有添加频道的部分，下面是我的代码

const [Channels, setChannelState] = React.useState([])
let loadedChannels = []
 React.useEffect(() => {

        setCurrentUser(props.currentUser)

        ref.ref('channels').on('child_added', snap =>{

            loadedChannels.push(snap.val())
            console.log(loadedChannels) 
            setChannelState(loadedChannels) 

        })



  },[])

因此，当我尝试记录loadedChannels数组时，我得到了所有结果，但当我尝试将该数组设置为我的状态时，我只得到了一个结果

---

如何解决此问题？

您有一个空数组

[]

作为第二个参数，它只运行一次传递给useEffect的函数

如果在重新渲染之间某些值没有更改，则可以告诉React to skip应用效果。要执行此操作，请将数组作为可选的第二个参数传递给useffect，您已经完成了此操作

如果我们将

[]

作为第二个参数传递，这将只应用一次

我们可以在数组中传递值，只在它触发useffect调用的更改上传递

按照

如果你想运行一个特效并且只清理一次（在安装和 卸载），可以将空数组（[]）作为第二个参数传递。这 告诉React您的效果不依赖于道具的任何值 或状态，因此它永远不需要重新运行。这不是一个特殊的问题 案例-它直接从依赖项数组始终 工作

尝试使用类似以下内容：

const [Channels, setChannelState] = React.useState([])

 React.useEffect(() => {
        let loadedChannels = []
        setCurrentUser(props.currentUser)

        ref.ref('channels').on('child_added', snap =>{

            loadedChannels.push(snap.val())

        })
       setChannelState([...loadedChannels]) 
},[])

---

希望这有帮助，快乐编码

useffect的第二个参数称为依赖项数组。当它为空时，它的行为类似于componentDidMount（），即在第一次渲染后只运行一次

您还需要小心设置useEffect中的状态，因为如果操作不正确，这可能会创建无限的重新渲染循环-

setCurrentUser

。这些代码还不足以提供更多帮助

---

这是进入React的最佳时机。玩得开心

为条件呈现传递第二个参数。要理解的是，很少有场景告诉我们可能的使用方法

通过演示中的示例，有多种场景可以让您更容易理解第二个参数的重要性和功能

情景1

第二个参数为空数组

useEffect(() => {     
    console.log(`You clicked ${count} times`);     
  },      
[ ])            //called only once similar to componentDidMount     

如果我们传递了一个空数组，这意味着我们对监视任何值都不感兴趣，因此除了装载和卸载之前，不会调用useEffect。此模拟是componentDidMount和componentWillUnmount的工作，它只运行一次

场景2

具有值的第二个参数

在我们的示例中，作为第二个参数（数组）传递的值：count将负责useffect钩子内函数的执行。如果数组中的值将被更新，那么并且只有在更新之后才会执行该函数

如果我们有多个useEffect挂钩，并且只需要更新其中的几个呢？条件渲染是一种很好的方法。通过传递第二个参数（而不仅仅是空数组）来实现条件渲染。将监控阵列中的值，并且仅在更新监控值时才会调用useEffect函数

有关更多信息，请参阅这些链接

---

尝试从您的

useffect

中删除

[]

。尝试删除

[]

或附加“[Channels]”，这样当频道更改时，只有传递给useffect的函数才会运行。@DarpanRangari我尝试了您的方法，但效果越来越好Loop@HimanshuRahi你有频道状态，它看起来怎么样？当它改变时，它将再次触发useEffect。你能在这里分享一下吗？当它第一次加载时，我只会得到一个处于通道状态的数组，当页面中的任何内容发生变化时，我会得到通道状态下的所有结果@DarpanRangariIt不起作用，当页面加载得到零结果时，当页面中发生变化时，我将得到所有结果arrary@HimanshuRahi在

setChannelState（[…loadedChannels]）中使用spread运算符。

欢迎@HimanshuRahi使用您，这是因为您返回相同的对象（以响应）来更新状态（即loadedChannels）-您已更改对象-这不会导致重新渲染。如果对数组[…loadedChannels]进行反结构，这将是一个新对象，并导致重新渲染。在这里查看我的答案以了解更多详细信息，因此当新值添加到LoadedChannel时，页面将在这里重新呈现？？但在我的应用程序中，每当页面加载时，我都必须设置redux状态，但这会多次设置我的redux状态。有没有办法只设置一次redux状态？？通道是本地状态，不在redux状态，您已经通过setChannelState更新了redux状态，如果您想更新redux存储中的状态，您也可以在这里进行更新，而不是使用setChannelState调度操作，然后更新存储。此外，您还将更新组件中所有通道状态的引用。

useEffect(() => {     
   console.log(`You clicked ${count} times`);     
}, [count]);      //function inside useEffect will be called when "count" will be updated