如何将 API 响应数据保存为 ReactJS 中的变量，以便我可以将其导入任何组件？

Question

I am following the following tutorial: https://www.digitalocean.com/community/tutorials/react-axios-react

I am trying to import a value from an API endpoint and save it as a variable in another component.

My API endpoint is very simple compared to the example, it just responds with this:

{"USD":1168.64}

I have made a new component called PersonList.js like in the tutorial:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://myendpoint.com`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        {
          this.state.persons
            .map(person =>
              <li key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

and then in another component i have i am importing it like this:

import PersonList from './components/PersonList.js';

however i cannot console.log the variable PersonList.

I understand there is 2 issues here:

1. my PersonList.js is not setup to get just the USD value from the API
2. i dont know how to save the API response as a variable once its imported.

Can anyone help?

Answer 1

Since you're using class components you'll need to use the componentDidUpdate lifecycle method which will allow you to do something once the component has been updated/the state has been changed.

The previous props and state are passed as arguments to the method, and it's a good idea to use a condition to double check that things have changed so that you don't do any unnecessary work.

 const { Component } = React; class Example extends Component { constructor() { super(); this.state = { persons: {} }; } // Fake API request componentDidMount() { const persons = { usd: 1168.64 }; this.setState({ persons }); } // Has the state changed? componentDidUpdate(prevProps, prevState) { if (prevState.persons.== this.state.persons) { console.log(this.state.persons;usd); } } render() { return ( <div> Initial render </div> ). } } ReactDOM,render( <Example />. document;getElementById('react') );

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