Axios请求使用包含映射集合中的变量的URL

Question

I don't think the title does a good job explaining this, so I'm sorry about that. Here's the quick summary. I have a collection that includes a key I need to pull out and append to a URL for an axios.get request. But, I need to map over the collection and make a get request for each key and return the results for each key.

If that doesn't make sense, maybe my terrible code will:

return this.props.wallets.map(wallet => {

  const apiLink = "https://api.smartbit.com.au/v1/blockchain/address/";
  const key = wallet.publicKey;
  const url = apiLink + key;
  this.getData = () => {
    axios
    .get(
      url
    )
    .then(res => {
      this.setState({ coins: res.data.address.total.received_int });
    })
    .catch(error => {
      console.log(error);
    });
  };

  let totalBitcoin = this.state.coins/100000000;

    return (
      <tr key={wallet._id}>
        <td>
          <Link className="wallet-link" to={link}>
            {wallet.title}
            <span className="glyphicon glyphicon-stats" />
          </Link>
        </td>
        <td>
          {totalBitcoin}
        </td>
        <td>
          <Link to="/wallets/delete">
            <span className="glyphicon glyphicon-trash" />
          </Link>
        </td>
      </tr>
  );
});

getData is a function that makes sure I'm only making the get request at a predetermined interval.

So, this almost works. I get the data back, sets all instances in my table of the totalBitcoin variable with the same result. Then it constantly updates that value as the function maps through my collection.

I have no idea how to make this axios request without mapping over my collection to get the necessary variable for the endpoint I'm calling. And I have no idea how to properly set my mapped variable. Any help would be so appreciated.

Answer 1

You are invoking this.setState method inside every iteration of this.props.wallets.map , this.state.coins value is constantly being reseted to a new value upon every axios request resolvement. This seems useless. Also the variable totalBitcoin will always be equal to the last resolved wallet's axios response res.data.address.total.received_int .

You could do the API calls in the componentDidMount() , then append each wallet response to the this.wallets array like so this.setState({wallets: [...this.state.wallets, wallet]}) . Now in the render function you can do return.this.state.wallet.map(wallet => ...) ;

Example

  class WalletContainer extends React.Component {
    componentDidMount(){
      this.props.wallets.map(wallet => {
        const apiLink ="https://api.smartbit.com.au/v1/blockchain/address/";
        const key = wallet.publicKey;
        const url = apiLink + key;
        this.getData = () => {
          axios
          .get(
            url
          )
          .then(res => {
            const newWallet = { 
                id: wallet._id,
                title: wallet.title,
                coins: res.data.address.total.received_int
            }
            this.setState({ wallets:
              [...this.state.wallets, newWallet]
             });
          })
          .catch(error => {
            console.log(error);
          });
        };
      })
    }
    render(){
      return this.state.wallets.map(wallet => {
        const totalBitcoin = wallet/100000000; // should be const because it never changes
        return (
          <tr key={wallet.id}>
            <td>
              <Link className="wallet-link" to={link}>
                {wallet.title}
                <span className="glyphicon glyphicon-stats" />
              </Link>
            </td>
            <td>
              {totalBitcoin}
            </td>
            <td>
              <Link to="/wallets/delete">
                <span className="glyphicon glyphicon-trash" />
              </Link>
            </td>
          </tr>
        );
      })
    }

  }

in case it's possible for props to change, you should write additional logic in willRecieveProps() where you will do the axios request and append the new wallet to the this.state.wallets or remove a wallet that is not present in the new props.