Calling Api in useEffect doesn’t work?

Question

I’m having a little problem here on the call for an API, code:

const [fullCurrency,setFullCurrency] = useState('');
function carregaMoedas(){
const res =  api.get('currencies?apiKey=do-not-use-this-key');
setFullCurrency(res.results);
  }
useEffect(()=>{
carregaMoedas();  
console.log(fullCurrency)
  },[]);

The above code string in the console.log returns

{"_U": 0, "_V": 3, "_W": {"_U": 0, "_V": 1, "_W": {"config": [Object], "data": [Object], "headers": [Object], "request": [XMLHttpRequest], "status": 200, "statusText": undefined}, "_X": null}, "_X": null}

I’ve tried everything here, but I can’t fix it. Thanks guys! Full link of the api https://free.currconv.com/api/v7/currencies?apiKey=do-not-use-this-key

Answer 1

Failed to execute the Promise for the execution to be processed:

const [fullCurrency,setFullCurrency] = useState('');
function carregaMoedas(){
    api.get('currencies?apiKey=do-not-use-this-key')
       .then(result => setFullCurrency(result.results));
}
useEffect(() => {
    carregaMoedas();  
},[]);
useEffect(() => { 
    console.log(fullCurrency); 
}, [fullCurrency])

Complete minimum example:

Note: was used fetch for requisition ajax.

function App() {
  const url = 'https://free.currconv.com/api/v7/currencies?apiKey=06370d8c7bb02f55780a';
  const [fullCurrency, setFullCurrency] = React.useState([]);
  function carregaMoedas(){
    fetch(url)
       .then(result => result.json())
       .then(result => {
           setFullCurrency(result.results)
       });
  }
  React.useEffect(() => {
      carregaMoedas();
  }, []);
  React.useEffect(() => {
    
  }, [fullCurrency]);
  return (
    <div>
      <h3>Moedas</h3> 
      {fullCurrency && fullCurrency.length === 0 && <div>Carregando ...</div>}
      {Object.entries(fullCurrency).map((item, index) => (
        <div>
          <h3>{item[0]}</h3>
          <div>
            {item[1].currencyName},
            {' '}
            {item[1].currencySymbol},
            {' '}
            {item[1].id}
          </div>
        </div>
      ))}
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));

*, body {
   font-family:arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

---

Note: was used Xios for requisition ajax.

function App() {
  const url = 'https://free.currconv.com/api/v7/currencies?apiKey=06370d8c7bb02f55780a';
  const [fullCurrency, setFullCurrency] = React.useState([]);
  function carregaMoedas(){
    axios.get(url)       
       .then(result => {        
           setFullCurrency(result.data.results)
       });
  }
  React.useEffect(() => {    
      carregaMoedas();
  }, []);
  React.useEffect(() => {
    
  }, [fullCurrency]);
  return (
    <div>
      <h3>Moedas</h3> 
      {fullCurrency && fullCurrency.length === 0 && <div>Carregando ...</div>}
      {Object.entries(fullCurrency).map((item, index) => (
        <div>
          <h3>{item[0]}</h3>
          <div>
            {item[1].currencyName},
            {' '}
            {item[1].currencySymbol},
            {' '}
            {item[1].id}
          </div>
        </div>
      ))}
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));

*, body {
   font-family:arial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="root">Carregando ...</div>

Note that there are differences in the two examples both in the request and response of the call ajax