React не перерисовывает компонент после обновления состояния
У меня есть код, который представлен ниже. Я ожидаю такое выведение: после нажатия на кнопку "Получить все пальцы" обновляется fingersNew и src в img меняет свое значение с finger на fingerActive. Но этого не происходит. Само состояние обновляется, данные приходят, но компонент перерисовываться не хочет. Буду благодарен, если подскажете, в чем моя ошибка.
import { FormWrapper } from './FormWrapper'
import { useState } from 'react'
import finger from './img/finger.svg'
import fingerActive from './img/finger-active.svg'
import axios from 'axios'
type Finger = {
img: string
}
let _Fingers = new Map<string, Finger>()
type FingerprintsData = {
fingerPrints: Map<string, Finger>
}
type FingerprintsDataProps = FingerprintsData & {
updateFields: (fields: Partial<FingerprintsData>) => void
}
export function Fingerprints ({
fingerPrints,
updateFields
}: FingerprintsDataProps) {
const [fingersNew, setFingersNew] = useState(_Fingers)
async function getFingers () {
const response = await axios.get('http://localhost:8000/bdfingers/' + 1)
response.data.forEach(function (row: any) {
_Fingers.set(String(row.tag), { img: row.img })
})
setFingersNew(_Fingers)
console.log('FingersNew', fingersNew)
}
return (
<FormWrapper title='форма'>
<div></div>
<img
src={fingersNew.has('721') ? fingerActive : finger}
alt='палец'
/>
...
<button onClick={getFingers}>Получить все пальцы</button>
</FormWrapper>
)
}
Ответы (1 шт):
Автор решения: Константин Кадочников
→ Ссылка
Проблема была в том, что во время выполнения getFingers() в setFingersNew передавалось значение _Fingers до того, как он был наполнен и только после этого происходило наполнение _Fingers.