无法在 Firestore 中设置状态添加承诺答案

【问题标题】：Cannot setState inside Firestore add promise无法在 Firestore 中设置状态添加承诺
【发布时间】：2020-02-15 09:23:20
【问题描述】：

在这里不知所措。我已经尝试了很多变体，但基本上我试图将 uploadRefId 的状态设置为创建新集合后返回的 id。我可以看到 id 是通过 console.log 生成的，但是 setState 函数似乎在这个承诺的范围内不起作用（uploadRefId 为 null）？

const [uploadRefId, setUploadRefId] = React.useState(null);

let uploadRefCol = await firestore.collection("uploads");
await uploadRefCol.add(uploadData)
  .then( (uploadDataRef) => {
    console.log('uploadDataRef.id: ', uploadDataRef.id);
    setUploadRefId(uploadDataRef.id);
    console.log('uploadRefId', uploadRefId);
  })
  .catch( (error) => {
    console.log('Error!', error)
});

【问题讨论】：

你能在外面试试第二个控制台语句看看吗？ ` React.useEffect(() => console.log('uploadRefId', uploadRefId), [uploadRefId]);`

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

在 React 的整个生命周期中更改状态可能很有趣。

如果你的uploadDataRef.id 是字符串类型，看看这是否有帮助：

const [uploadRefId, setUploadRefId] = React.useState('');

如果它是一个数值，请查看 setUploadRefId 是否适用于此：

const [uploadRefId, setUploadRefId] = React.useState(0);

这可能不是一个解决方案，但它可以引导您找到一个解决方案。

【讨论】：

【解决方案2】：

setUploadRefId(uploadDataRef.id);

以上是异步更新状态，因此如果您立即使用状态值，则该值尚未设置，您正在尝试访问该值

  useEffect(() => {
 console.log('uploadRefId', uploadRefId);
})

所以上述使用效果会在状态的每次更新上运行，您可以注意任何状态变化

Code sandbox sample

【讨论】：

谢谢！这有帮助。我认为这是一些奇怪的时间问题。我看到状态正在设置，但由于某种原因第二个 console.log 没有及时发生。