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

Question

我正在尝试获取令牌并将其传递给我的 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 中看到用双引号括起来的令牌值。但是，当我尝试将其传递给我的地图时，它不起作用。如果我复制从 console.log 获得的内容并替换令牌值，它会完美运行。有任何想法吗？

我的控制台的图像

标签： javascriptreactjs

Answer 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>}