I am having issues with setting state. When I try to set the state of setDataTemp() from axios the data sent into setDataTemp is blank. however if I just console log the data directly I get response. Not sure what wrong
setDataTemp is not empty
const [dataTemp, setDataTemp] = useState([]);
const _overlayFilder = async () => {
let source = axios.CancelToken.source();
await axios
.get(network + '/getOverlayList', {
cancelToken: source.token,
})
.then(response => {
removeRootUUID(response.data.items, response.data.items);
// console.log(response.data);
return response.data;
})
.then(response => {
setDataTemp(response.items);
})
.catch(function (e) {
if (axios.isCancel(e)) {
console.log(`request cancelled:${e.message}`);
} else {
console.log('another error happened:' + e.message);
}
})
.finally(() => {
console.log(dataTemp)
});
If I don't set the state setDataTemp and I just console.log instead I prints the data
const [dataTemp, setDataTemp] = useState([]);
const _overlayFilder = async () => {
let source = axios.CancelToken.source();
await axios
.get(network + '/getOverlayList', {
cancelToken: source.token,
})
.then(response => {
removeRootUUID(response.data.items, response.data.items);
// console.log(response.data);
return response.data;
})
.then(response => {
// the data that I want to set into setDataTemp
console.log(response.items);
})
.catch(function (e) {
if (axios.isCancel(e)) {
console.log(`request cancelled:${e.message}`);
} else {
console.log('another error happened:' + e.message);
}
})
You are mixing an async function handling using a Promise-like approach with your axios call.
Try to change your code like this:
const [dataTemp, setDataTemp] = useState([]);
const _overlayFilder = async () => {
try {
let source = axios.CancelToken.source();
const { data } = await axios.get(network + '/getOverlayList', {
cancelToken: source.token,
});
removeRootUUID(data.items, data.items);
setDataTemp(data.items);
console.log(dataTemp);
} catch (err) {
if (axios.isCancel(err)) {
console.log(`request cancelled:${e.message}`);
} else {
console.log('another error happened:' + e.message);
}
}
};