各位好，小弟目前使用react+axios作API串接，遇到一些問題，我目前使用axios請求資料回來後放進dataSG參數，在Axios.spread裡面dataSG顯示返回的資料，但是放進組件的{...dataSG}卻是初始值沒有被更動的，好像只要離開fetchStationAll()，dataSG就會是初始值，想請較各位大大這是什麼原因? 謝謝~

import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import Axios from 'axios'
import { GetStation as SG, StationPosition as SP, Stationimmediate as SI } from '../api/apis'
import cookies from 'react-cookies'
import StationInfo from './ProjectData/StationInfo'
import StationPosition from './ProjectData/StationPosition'
import StationImmediate from './ProjectData/StationImmediate'

const ProjectData = props => {
    const { pjid, pjn } = props.match.params;
    const navList = ['AAA', 'BBB', 'CCC']
    let dataSG = ""
    let dataSP = ""
    let dataSI = ""
    const [pageCurrent, setPC] = useState("AAA");
    const apiParams = {
        params: {
            PJid: pjid
        },
        headers: {
            Authorization: `Bearer ${cookies.load('react-token').Token}`
        }
    }
    const resSG = Axios.get(SG, apiParams)
    const resSP = Axios.get(SP, apiParams)
    const resSI = Axios.get(SI, apiParams)
    useEffect(() => {
        const fetchStationAll = async () => {
            await Axios.all([resSG, resSI, resSP]).then(
                Axios.spread((...res) => {
                    dataSG = res[0].data.Payload
                    dataSI = res[1].data.Payload
                    dataSP = res[2].data.Payload
                    console.log(dataSG)//有返回資料
                })
            ).catch(err => {
                console.log(err)
            })
        }
        fetchStationAll()
    }, [pjid]);
    const changePage = (e) => {
    }
    return (
        <React.Fragment>
            <Container>
                <div>
                    <h3>{pjn}</h3>
                </div>
                <PageList>
                    {navList.map(el => <PageText key={el} onClick={() => changePage(el)}>{el}</PageText>)}
                </PageList>
                <div>
                    <StationInfo {...dataSG} />
                    <StationImmediate {...dataSI} />
                    <StationPosition {...dataSP} />
                </div>
            </Container>
        </React.Fragment>
    );
}

const Container = styled.div({
    minHeight: 'calc(100vh - 54px)',
    padding: '1rem'
})
const PageList = styled.ul({
    display: 'flex',
    listStyle: 'none',
    padding: '0',
    fontFamily: '微軟正黑體',
    fontWeight: 'bolder'
})
const PageText = styled.li`
&:hover{
    cursor:pointer;
    color:blue
}
&:nth-child(2):after,&:nth-child(2):before{
  content:"/";
  margin:0px 5px;
}
`
export default ProjectData;