React setState 未在 firestore 添加文档承诺解决

Question

我将项目列表作为文档存储在 Firestore 集合中。当新项目添加到列表中时，它们将存储在组件状态下的单独变量中，但会与已保存到 firestore 的项目数组合并。

仅当调用手动保存文档时，文档才会添加到 firestore 集合中。调用保存调用时调用的逻辑如下：

if (this.state.unsavedNoteItems.length){
    let items = this.state.unsavedNoteItems.map(item => item) //make a local copy of unsaved items
    this.setState({unsavedNoteItems:[]}) //clear unsaved items array in component state
    items.map(item => {
        docRef.collection('items').add(item)
        .then(doc => {
            console.log("item saved: ", doc.id)
            //if item was added successfully, merge it into note Items
            this.setState((pState) => {noteItems: [...pState.noteItems,item]})
            console.log('state was set', item)
        })
        .catch(error => {
            console.log("Error: ", error)
            //if item add failed, put is back in unsavedNoteItems list
            this.setState((pState) => {unsavedNoteItems: [...pState.unsavedNoteItems,item]})
        })
    })
}

在添加项目后的解析器中，this.setState 不会更新 UI，即使更改已保留。

我通过创建查询快照解决了这个问题，但想了解为什么 setState 调用不会更新 UI。有什么想法吗？

Answer 1

(pState) => {noteItems: [...pState.noteItems,item]} 这里的{ } 不是对象字面量而是块语句。

const iReturnUndefined = value => {a: value}
const iReturnObject = value => ({a: value})

console.log(iReturnUndefined('a'))
console.log(iReturnObject('a'))

您需要用() 包装它以使其成为对象初始化表达式

if (this.state.unsavedNoteItems.length){
    let items = this.state.unsavedNoteItems.map(item => item) //make a local copy of unsaved items
    this.setState({unsavedNoteItems:[]}) //clear unsaved items array in component state
    items.map(item => {
        docRef.collection('items').add(item)
        .then(doc => {
            console.log("item saved: ", doc.id)
            // NB! 1
            this.setState(pState => ({noteItems: [...pState.noteItems,item]}))
            console.log('state was set', item)
        })
        .catch(error => {
            console.log("Error: ", error)
            // NB! 2
            this.setState(pState => ({unsavedNoteItems: [...pState.unsavedNoteItems,item]}))
        })
    })
}