Данные «не определены», когда находятся за пределами моего крючка useEffect. ⇐ Javascript

[Anonymous]

При печати «результатов» в loadData() отображаются ожидаемые данные, но при печати «данных» или «последних» возвращается неопределенное значение.

Код: Выделить всё

import './App.css'
import Dashboard from './components/Dashboard'
import Map from './components/Map'
import { fetchQuery } from './query.mjs'

function App() {
const [data, setData] = useState([])
const [selectedBuoy, setSelectedBuoy] = useState('stee_buoy_001')

useEffect(() => {
async function loadData() {
try {
const results = await fetchQuery(selectedBuoy)
console.log('Results from fetchQuery:', results)
setData(results)
} catch (err) {
console.error('Failed to fetch buoy data:', err)
}
}

loadData()

// Refresh data every 1 second
const interval = setInterval(loadData, 1000)
return () => clearInterval(interval)
}, [selectedBuoy])

console.log('Data: ', data)

// Fetches the most recent data of each buoy
const latest = data[0]
console.log('Outside: ', latest)

return (





)
}

export default App

Здесь выполняется запрос к InfluxDB:

Код: Выделить всё

import { InfluxDB, flux } from '@influxdata/influxdb-client'
import * as env from './env.mjs'

const client = new InfluxDB({ url: env.INFLUX_URL, token: env.INFLUX_TOKEN })
const queryApi = client.getQueryApi(env.INFLUX_ORG)

export async function fetchQuery(device_id) {
// TODO: Enable user selection of range

const query = flux`
from(bucket: "${env.INFLUX_BUCKET}")
|> range(start: -1m)
|> filter(fn: (r) => r["device_id"] == "${device_id}")
|> filter(fn: (r) => r["topic"] == "ausco/buoy/stee_buoy_001/gps")
|> pivot(rowKey:["_time"], columnKey: ["_field"], valueColumn: "_value")
`

console.log(`Fetched ${device_id}`)

return new Promise((resolve, reject) => {
const results = []
queryApi.queryRows(query, {
next(row, tableMeta) {
const o = tableMeta.toObject(row)
results.push(o)
},
error(error) {
console.error(error)
reject(error)
},
complete() {
console.log('InfluxDB results: ', results)
resolve(results)
}
})
})
}

Честно говоря, я понятия не имею, с чего начать. До сих пор все, что я мог придумать, это вывести результаты, данные и последние данные на консоль для устранения проблемы. Я новичок в асинхронных функциях, может быть, рендеринг выполняется до loadData()?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ffect-hook