Как получить доступ к глобальной переменной после ее локального хранения?

Question

У меня проблемы с использованием локальной переменной вне функции. Я делаю вызов myapi.com/access_token для получения токена доступа, а затем мне нужно использовать этот токен доступа в заголовке моего запроса к jsonserverprovider. Я попытался объявить это с помощью window.bl_token, но я все еще получаю результат undefined, когда я пытаюсь console.log получить ответ.

import React from 'react';
import { fetchUtils, Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

var bl_token;

const data = { email: 'xxx@xxx.com', password: 'xxx' };

fetch('https://myapi.com/access_token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((bl_data) => {
  window.bl_token=bl_data.access_token;
})

const httpClient = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
      options.headers = new Headers({Authorization: bl_token});

  }
  return fetchUtils.fetchJson(url, options);
};

const dataProvider = jsonServerProvider('https://myapi.com/', httpClient);
const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="links"/>
   </Admin>
);
export default App;

Answer 1

Потенциально то, что здесь происходит, заключается в том, что при загрузке страницы начальное значение bl_token не определено, ваша функция установки выборки токена будет выполняться, но как только она будет завершена и токен получен, состояние не обновляется, оставляя bl_token как неопределенный, когда вы пытаетесь его получить.

Чтобы исправить это, вам нужно будет отреагировать на изменение состояния, самый простой способ, которым я могу придумать, - это useEffect реагирующего хука.

import React, { useEffect, useState } from 'react';
import { fetchUtils, Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';


export const App = () => (

const [blToken, setBlToken] = useState(null); // chuck the token in react state
const data = { email: 'xxx@xxx.com', password: 'xxx' };

// add the react hook useEffect, this will fire on page load
useEffect({
 fetchData(); 
},[])


// move the fetch into a function
const fetchData = () => {
  fetch('https://myapi.com/access_token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((bl_data) => {
  //window.bl_token=bl_data.access_token;
  // update the react state here
   setBlToken(bl_data.access_token)
})
}

const httpClient = (url, options = {}) => {
  if (!options.headers) {
      options.headers = new Headers({ Accept: 'application/json' });
      // use the state variable here
      options.headers = new Headers({Authorization: blToken});

  }
  return fetchUtils.fetchJson(url, options);
 };



// add a check to render only if the blToken is present

if(blToken) {
 const dataProvider = jsonServerProvider('https://myapi.com/', httpClient);
 return( 
    <Admin dataProvider={dataProvider}>
        <Resource name="links"/>
   </Admin>
 )
} else {
  return null
}

);

Используя состояние реагирования для отслеживания переменной, оно может повторно отображаться при наличии доступа к данным.

Answer 2

Var никогда не является правильным решением в любом случае использования. В этом примере я бы использовал функцию useEffect, которая поставляется с реагировать:

const App = () => {

const [loaded, setLoaded] = React.useState(false);
const [accessToken, setAccessToken] = React.useState([]);

React.useEffect(() => {
 // put your fetch here (please be aware that the following is pseudo code)
 fetch('test').then(res => res.json()).then(res => setAccessToken(res.token));
);

 return (
  <div>
   {loaded ? yourLogicThatDependsOnAccessToken : null }
 </div>
 );
}