Как распечатать значение обещания из почтового запроса? (ReactJs)

Question

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

Я пробовал .stringify и .text, но без разницы. Все еще только консоль регистрирует обещание.

Button.jsx

import React, { useState } from 'react';
import axios from 'axios';
import getResponse from '../Handler/getResponse.jsx'
import getToken from '../Handler/getToken.jsx'
import './Button.css';

const Button = ({selectedIcon}) => {
   const [selected] = selectedIcon;
   const [xappToken] = useState(getToken());
   console.log(xappToken);

   return(
      <div className="buttonBlock">
         <span className="btn">
            <input className="btn-outline" type="button" value="Press Me" onClick={ () => getResponse(xappToken) }/>
         </span>
      </div>
   );
}

export default Button

getToken.jsx

export default async function getToken(){
   try {
     const response = await axios.post('https://api.artsy.net/api/tokens/xapp_token', {
         client_id: 'some-client-id',
         client_secret: 'some-client-secret'
     });
     console.log('? Returned data:', response.data.token);
     return  response.data.token;
   } catch (e) {
     console.log(`? Axios request failed: ${e}`);
     return "Error";
   }
}

Answer 1

Это потому, что getToken - это обещание. Вы можете сделать это:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import getResponse from '../Handler/getResponse.jsx'
import getToken from '../Handler/getToken.jsx'
import './Button.css';

const Button = ({selectedIcon}) => {
   const [selected] = selectedIcon;
   const [xappToken, setXappToken] = useState(null);
   useEffect(() => {
     getToken().then(token => setXappToken(token))
   }, [])
   console.log(xappToken)

   return(
      <div className="buttonBlock">
         <span className="btn">
            <input className="btn-outline" type="button" value="Press Me" onClick={ () => getResponse(xappToken) }/>
         </span>
      </div>
   );
}

export default Button

Answer 2

Полагаю, вам также нужно выполнить asyn c await в Button.jsx:

    const Button = async ({ selectedIcon }) => {
        const [selected] = selectedIcon;
        const [xappToken] = useState(await getToken());
        console.log(xappToken);
    };

Поскольку getToken - это хорошо, технически это обещание. Поэтому вам нужно подождать, прежде чем получить доступ к значению этого.

Answer 3

Попробуйте это:

import React, { useState } from 'react';
import axios from 'axios';
import getResponse from '../Handler/getResponse.jsx'
import getToken from '../Handler/getToken.jsx'
import './Button.css';

const Button = async ({selectedIcon}) => {
   const [selected] = selectedIcon;
   const [xappToken] = useState(await getToken());
   console.log(xappToken);

   return(
      <div className="buttonBlock">
         <span className="btn">
            <input className="btn-outline" type="button" value="Press Me" onClick={ () => getResponse(xappToken) }/>
         </span>
      </div>
   );
}

export default Button

Answer 4

если я правильно помню, так как вы получаете обещание, вам также придется ждать ответа. Вы должны json () свой ответ и сохранить его во что-то другое, а затем console.log новый результат, например

const result = await response.json()
console.log(result)