Question

我从我的 firebase 实时数据库中获取了一些数据，这些数据在我的 useEffect 钩子函数中作为对象返回。我想将这些数据映射到 UI 中的不同行。但问题是当我尝试通过在 setState() 函数中传递获取的数据来设置组件中的 setState 时，它返回一个空对象。我试图将获取的数据对象转换为数组，然后设置状态，但 console.log(state) 仍然显示一个空数组。当我使用状态作为依赖项（useEffect 中的第二个参数）时，它返回状态的无限循环。代码看起来像这样-

const ToDoList = () => {
   const [toDo, setToDo] = useState([])

   useEffect(() =>  {
    const fetchData = async () => {
      try{
        toDoListRef.on('value', snapshot => {
          const fetchedPostObject = snapshot.val()
          console.log(fetchedPostObject) // shows fetched data in the object form
          var fetchedPostArr = []
          fetchedPostArr = Object.entries(fetchedPostObject)
          setToDo(fetchedPostArr)
          console.log(toDo)   // []
        })
      }catch(err){
        console.log(err)
      }
    }
    fetchData()
  }, [])
}

如果我不将获取的对象转换为数组，那么它返回一个空对象，如果我再次使用依赖项，它返回一个无限状态。

Answer 1

您不会在 setState 之后获得更新的值，因为它是异步的。相反，你可以尝试这样的事情

useEffect (() => {console.log(toDo)},[toDo])

此挂钩侦听 toDo 的任何更新值，并在 toDo 的值更新时执行。

Answer 2

首先，您必须了解为什么要使用 useEffect 钩子？在组件的当前状态下执行一些副作用（在您的情况下从 firebase 获取数据）。现在，如果您尝试更改 useEffect 钩子内的状态，该状态将始终相同（useEffect 内的初始状态，这就是 useEffect 旨在用于) 但在 useEffect 之外，您将看到组件的状态已更改。

val subject = PublishSubject.create<Any>()
val observable = subject.hide()

因此，您的组件的状态已更新，但在 useEffect 中，您始终会看到与之前相同的状态。

setState 在 useEffect 钩子中不起作用

2 个答案: