Почему при попытке обновить state из useEffect он не обновляется?

Question

[Никита]

Почему при попытке обновить tabsFields из useEffect он не обновляется?

// Apollo Client запрос к GraphQL серверу
    const { data, error, loading } = useQuery(GET_ORG(props.match.params.essenceId))

    // State который не обновляется
    const [tabsFields, setTabsFields] = useState()

    // отслеживаю изменение state
    useEffect(() => {
        if (data !== undefined) {
            // перебираю массив контактных лиц
            data.org.contactPersons.map(i => {
                const ID = nanoid(8) // использую либу nanoid для генерации ID
                let obj = {}

                obj[i._id + '~' + ID + '^name'] = i.name 
                i.phone.map((j, idx) => {
                    obj[i._id + '~' + ID + '^phone-' + idx] = j
                })

                i.eMail.map((j, idx) => {
                    obj[i._id + '~' + ID + '^eMail-' + idx] = j
                })
                setTabsFields({...tabsFields, obj})
            })
        }
    }, [data])

Если не хватает каких-то фрагментов кода, добавлю.

Я пытался реализовать альтернативный вариант, но лишь поменял шило на мыло

Альтернативный вариант

// Apollo Client запрос к GraphQL серверу
    const { data, error, loading } = useQuery(GET_ORG(props.match.params.essenceId))

    // State который не обновляется
    const [tabsFields, setTabsFields] = useState({})

    // отслеживаю изменение state
    useEffect(() => {
        if (data !== undefined) {
            // перебираю массив контактных лиц
            data.org.contactPersons.map(i => {
                const ID = nanoid(8) // использую либу nanoid для генерации ID
                let obj = {...tabsFields}

                obj[i._id + '~' + ID + '^name'] = i.name 
                i.phone.map((j, idx) => {
                    obj[i._id + '~' + ID + '^phone-' + idx] = j
                })

                i.eMail.map((j, idx) => {
                    obj[i._id + '~' + ID + '^eMail-' + idx] = j
                })
                setTabsFields(obj)
            })
        }
    }, [data])

Comments

[Никита]

Хабр умирает. Ни кто даже не попытался решить проблему, как раньше. Мне ни кто ни чем не обязан, я лишь сравнил было/стало.

[Михаил]

Никита Пурыга, дебажьте, чё ещё можно сказать

Answer 1

[Николай Ланец]

Никита, вы зря засунули setTabsFields внутрь цикла map. setTabsFields - это синхронная функция. При каждом выполнении цикла map и вызове setTabsFields у вас let obj = {...tabsFields} не является новым объектом с актуальным состоянием tabsFields. В вашем случае это всегда новый объект, но с одними и теми же данными, которые были в tabsFields на момент выполнения цикла.
Сделайте примерно так:

useEffect(() => {

        // const obj = {...tabsFields}
        // Сдесь скорее всего всегда пустой объект начальный должен быть, иначе в нем могут остаться уже неактуальные данные.
        const obj = {}

        if (data !== undefined) {
            // перебираю массив контактных лиц
            data.org.contactPersons.map(i => {
                const ID = nanoid(8) // использую либу nanoid для генерации ID

                obj[i._id + '~' + ID + '^name'] = i.name 
                i.phone.map((j, idx) => {
                    obj[i._id + '~' + ID + '^phone-' + idx] = j
                })

                i.eMail.map((j, idx) => {
                    obj[i._id + '~' + ID + '^eMail-' + idx] = j
                })
            })
        }

         // Устанавливаем конечный набор полей в стейт
         setTabsFields(obj)

    }, [data])