Why is it not updated when trying to update the state from useEffect?

Question

React

Why doesn't it update when I try to update tabsFieldsfrom 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])

If there are any missing pieces of code, I'll add them.

I tried to implement an alternative, but only changed the awl to soap

Alternative option

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

Answer 1

Nikita, you shouldn't have put setTabsFields inside the map loop. setTabsFields is a synchronous function. Every time you run the map loop and call setTabsFields , you have let obj = {...tabsFields} not a new object with the current tabsFields state. In your case, this is always a new object, but with the same data that was in tabsFields at the time the loop was executed.
Do something like this:

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