Реагировать setState не выполняется в firestore добавить документ обещание решить

Question

Я храню список предметов в виде документов в коллекции пожарных.Когда новые элементы добавляются в список, они сохраняются в отдельной переменной в состоянии компонента, но объединяются с массивом элементов, уже сохраненных в хранилище.

Документы добавляются в коллекцию хранилища только при ручном вызове.чтобы сохранить их, вызывается.Логика, которая вызывается при вызове сохранения, выглядит следующим образом:

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 не обновляет интерфейс, даже если изменения сохраняются.

Я решил эту проблему, просто создав снимок запроса, но хочу понять, почему вызов setState не обновляет пользовательский интерфейс.Есть идеи?

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