Question

所以基本上我开始学习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 数组时，会得到所有结果，但是当我尝试将此数组设置为我的状态时，则只会得到一个结果我该如何解决？

Answer 1

您有一个空数组[]作为第二个参数，该参数仅运行一次传递给useEffect的函数。

如果在重新渲染之间某些值未更改，您可以告诉React跳过应用效果。为此，请将数组作为可选的第二个参数传递给您完成的useEffect。

如果我们将[]作为第二个参数传递，则将仅只应用一次。

我们只能在数组中传递值，只有在更改时它会触发useEffect调用。

按照documentation

如果您要运行效果并仅将其清理一次（在挂载和卸载），则可以传递一个空数组（[]）作为第二个参数。这个告诉React你的效果不依赖于道具的任何值或状态，因此它不需要重新运行。这不是特殊处理 case —直接从依赖关系数组始终如何得出有效。

尝试使用类似这样的内容：

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]) 
},[])

希望这会有所帮助，祝您编程愉快！

Answer 2

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

您还需要注意在useEffect中设置状态，因为如果操作不正确，这可能会导致无限循环的重新渲染-"student"。仅此而已的代码不足以提供更多帮助。

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

Answer 3

传递第二个参数以进行条件渲染。要了解，很少有场景可以告诉我们使用它的可能方法。

有多种情况，借助演示示例，您可以更轻松地理解第二个参数的重要性和功能。

场景1

第二个参数为空数组，

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

如果我们传递一个空数组，则意味着我们对监视任何值都不感兴趣，因此除非在安装时和在卸载之前，否则不会调用useEffect。模仿componentDidMount和componentWillUnmount的工作方式，它将只运行一次。

场景2

带有值的第二个参数，

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

作为示例中的第二个参数（数组）传递的值：count将负责useEffect Hook中函数的执行。如果数组中的值将被更新，则只有执行该函数。

如果我们有多个useEffect挂钩并且只需要更新其中几个挂钩怎么办？有条件渲染。通过传递第二个参数而不是空数组来实现条件渲染。将监视数组中的值，并且仅在更新监视的值时才调用useEffect函数。

请参阅这些链接以获取更多信息 https://stackblitz.com/edit/react-hooks-intro https://www.c-sharpcorner.com/article/react-hooks-introduction/

useEffect将值仅推入一次ReactJs

3 个答案: