如何使用 axios 响应数据设置 state

Question

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);
        }
      })
      

Answer 1

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);
    }
  }
};

Answer 2

You need to use useEffect :

import { useEffect } from "react";

const [loading, setLoading] = useState(true);
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);
        setLoading(false);
      })
      .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 triggered by onClick handler
useEffect(() => {
     
}, [loading, JSON.stringify(dataTemp)])