useEffect不遵守承诺并返回null

Question

我尝试在组件首次加载时使用Effect。 UseEffect调用了firebase函数，但返回的是null，我不知道为什么。

     const [emails, setEmails] = useState({
        reports: [],
        savedReports: [],
      })

        useEffect(() => {
    props.firebase.getEmailReportsTo(props.orgId)
    .once('value')
    .then(returnedEmails => {
      console.log(returnedEmails.val());
      setEmails(prevEmails => ({
        ...prevEmails,
        savedReports: [returnedEmails.val()]
      }))
    })
  }, []);

这里我调用了一个返回值的firebase方法。我已经确认该端点中存在值。上面返回null。在调用完成之前，好像控制台日志正在记录。但是我不知道为什么，因为console.log在then中。 Console.log不是重要的部分，但在我的状态下也会创建null。

当我这样做时：

 useEffect(() => {
    props.firebase.getEmailReportsTo(props.orgId)
    .once('value')
    .then(returnedEmails => {
      console.log(returnedEmails.val());
      setEmails(prevEmails => ({
        ...prevEmails,
        savedReports: [returnedEmails.val()]
      }))
    })
  }, [emails.savedReports]);

我可以查看带有数据的console.log，但这会陷入无限循环。将[emails.savedReports]更改为[emails]也会返回null

这可以分为两个问题，但是无论如何帮助我实现将状态设置为Firebase调用的结果对我来说都是有效的。一个可能是为什么useEffect不等待然后完成？另一个可能是如果[emails.savedReports已更新，那么它不应该停止执行useEffect吗？但是我可以解决，这对我来说很酷。

Answer 1

您在获取props.orgId时正在发出请求

useEffect(() => {
  if(props.orgId){ // if you receive your orgId then an then your request will be call
    props.firebase.getEmailReportsTo(props.orgId)
    .once('value')
    .then(returnedEmails => {
      console.log(returnedEmails.val());
      setEmails(prevEmails => ({
        ...prevEmails,
        savedReports: [returnedEmails.val()]
      }))
    })
   }
  }, [props.orgId]);