#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня следующая структура:
Что я пытаюсь сделать, так это обновить метрики новыми данными:
const [data, setData] = useState<any>({});
getServerResourceUsage(serverId, intervalTime)
.then(res => {
setData((state: any) => ({
...res.data.data,
metrics: {
time_series: state.metrics.time_series.concat(res.data.data.metrics.time_series)
}
}));
})
.catch(error => {
console.log(error.response)
})
.finally(() => {
setLoading(false);
});
Теперь я получаю следующую ошибку:
Я изо всех сил пытаюсь выяснить, почему состояние пустое и как я могу даже записать его значение в консоль для отладки проблемы.
Комментарии:
1. не могли бы вы тоже поделиться своим состоянием?
2. @Fatur это обратный вызов для useState, я добавил строку.
Ответ №1:
Измените способ объявления состояния, чтобы оно не выдавало ошибку при первой выборке.
const [data, setData] = useState<any>({
metrics: {
time_series: []
}
});
И параметр setState должен быть новыми данными, а не обратным вызовом.
setData({
...res.data.data,
metrics: {
time_series: data.metrics.time_series.concat(res.data.data.metrics.time_series)
}
});
Или вы также можете распространить существующие time_series:
setData({
...res.data.data,
metrics: {
time_series: [...data.metrics.time_series, ...res.data.data.metrics.time_series]
}
});
Комментарии:
1. Спасибо за ваш ответ, но я ошибочно использовал concatenate для объекта, а не массива, time_series не является массивом (он показан на приведенном рисунке), и почему я должен удалять этот обратный вызов? основываясь на документации React JS, для обновления предыдущего состояния нам лучше использовать обратные вызовы.
2. @MohammadA.Souri Нет, мы не должны. Это документ reactjs.org/docs/hooks-state.html
3. взгляните на это: reactjs.org/docs/hooks-reference.html#functional-updates