Делаю для себя небольшой дашборд (сразу скажу, я аналитик и с вебдевом знаком постольку-поскольку), в нём есть вот такой предельно простой фрагмент кода:
export default function TFDasboard() {
const selectedFile = useContext(DataContext)
const [selectedRoute, setSelectedRoute] = useState('')
const { data, isError, isLoading } = getSingleProject(selectedFile)
const switchSelectedRoute = (selection) => {
console.log('Selection:', selection)
console.log('Direction:', selection.direction)
setSelectedRoute(selection)
}
useEffect(() => {
console.log('Selected Route:', selectedRoute)
}, [selectedRoute])
Смысл простой: когда мы щёлкаем строку в табличке и выбираем маршрут, он записывается в стейт. Через useEffect я пока проверяю что всё записалось нормально, потом будут дополнительные действия. И вот тут начинается какая-то магия, потому что в консоли я получаю следующее:
Selection: {rname: 'Тм11', direction: 'AB', nextStop: 365001654}
dashboard.jsx:25 Direction: AB
dashboard.jsx:30 Selected Route: {rname: 'Тм11', direction: Array(2), nextStop: 365001654}
То-есть приходит в объекте поле direction в виде строки, а записывается в стейт - в виде массива! Да, у меня есть эти массивы (список остановок по маршрутам) в описаниях маршрутов, но это совсем другие переменные (в объекте data, причём глубоко в нём). Ума не приложу куда копать...