React.js useEffect с вложенными асинхронными функциями
У меня есть общее предупреждение, отображаемое при загрузке моего веб-приложения, но больше никогда...
Предупреждение: невозможно выполнить обновление состояния React для несмонтированного компонента. Это не работает, но указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в useEffect. функция очистки.
РЕДАКТИРОВАТЬ**** Это вызвано этим фрагментом кода. Я сузил его до одной функции. Он взрывается, когда я пытаюсь установить состояние влажности. Я не уверен, почему.
function getData (){
Axios.get("http://localhost:3001/api/get-value").then((response) => {
const recievedData = response.data;
const dataValue = recievedData.map((val) => {
return [val.value]
})
if (loading === true){
setLoading(false);
}
return parseInt(dataValue);
}).then((resp)=>setMoisture(resp))
}
React.useEffect(() => {
if (moisture === "initialState"){
getData();
}
}, []);
что делает setMoisture()? Какие-то компоненты там использовались?
Да, это переменная состояния [влажность, setMoisture] = useState['']
Я отредактировал свой предыдущий пост. Это то, что вызывает проблему. Есть идеи, как это исправить? Я также вызываю setLoading, который является переменной состояния и не вызывает проблем.
Вы уже видели этот вопрос? Я думаю, что у вас аналогичная ситуация. stackoverflow.com/questions/56442582/… Обязательно верните функцию, которая выполняет очистку ближе к концу useEffect. Что-то вроде return () => { ... };
Спасибо!!! Это решение. Я опубликую ниже.
Решение идентично этому ответу... stackoverflow.com/questions/56442582/…
Я рад, что это помогло!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Публикация ответа здесь (на основе комментариев) для полноты.
По сути, используйте локальные переменные и функцию очистки ближе к концу useEffect(). Используя это как ссылку:
Вы должны объявить функцию внутри useEffect или добавить ее как зависимость. один из способов сделать это - просто переместить вашу функцию внутри хука.
// I assumed that your useState hooks looks something similar.
const [moisture, setMoisture] = React.useState('initialState')
const [loading, setLoading] = React.useState(true)
React.useEffect(() => {
function getData() {
Axios.get("http://localhost:3001/api/get-value").then((response) => {
const recievedData = response.data;
const dataValue = recievedData.map((val) => {
return [val.value]
})
if (loading === true) {
setLoading(false);
}
return parseInt(dataValue);
}).then((resp => setMoisture(resp)))
}
if (moisture === "initialState"){
getData();
}
}, [])
Вы также, вероятно, захотите сначала установить свои данные в состояние, а затем изменить состояние загрузки на false, это предотвратит некоторые ошибки. Это еще один способ сделать это и управлять состоянием загрузки и промисами.
React.useEffect(() => {
function getData() {
setLoading(true)
Axios.get("http://localhost:3001/api/get-value")
.then((response) => {
const dataValue = response.data.map((val) => {
return [val.value]
})
// This is going to pass 0 when can't parse the data
setMoisture(parseInt(dataValue) || 0)
setLoading(false)
})
}
getData()
}, [])
Я думаю, что сузил проблему до функции getData.