获取令牌并将其传递给渲染视图 - React js

时间:2021-02-11 10:14:31

标签: javascript reactjs

我正在尝试获取令牌并将其传递给我的 Apple Map。

const[mapToken, setMapToken] = useState();

    useEffect(()=> {

        getMapToken();

    },[])
    
    const getMapToken = async ()=>{
        const res = await fetch("TokenURL");
        const token = await res.text();
        setMapToken('"'+ token +'"');
    }

//I can see the token value here wrapping by double quotation mark:

    console.log(mapToken);

这是我渲染它的方式:

   <AppleMaps 
    token={mapToken}
    longitude={storeinfo.longitude}
    latitude={storeinfo.latitude}
    zoomLevel={10}
    height='150px'
    width='500px'
>
</AppleMaps>

我可以在console.log中看到用双引号括起来的token值。但是,当我尝试将它传递给我的地图时,它不起作用。如果我复制从 console.log 得到的内容并替换令牌值,它就可以完美运行。有什么想法吗?

The image of my console

1 个答案:

答案 0 :(得分:-1)

在 mapToken 可用时尝试渲染 AppleMaps。

const [mapToken, setMapToken] = useState('');
    useEffect(()=> {

        getMapToken();
    },[])
    
    const getMapToken = async ()=>{
        const res = await fetch("TokenURL");
        const token = await res.text();
        setMapToken('"'+ token +'"');
    }
{mapToken.length && <AppleMaps 
   token={mapToken}
   longitude={storeinfo.longitude}
   latitude={storeinfo.latitude}
   zoomLevel={10}
   height='150px'
   width='500px'
>
</AppleMaps>}