十进制格式数 React答案

【问题标题】：Decimal format number React十进制格式数 React
【发布时间】：2018-12-18 09:25:00
【问题描述】：

我使用 axios 进行 API 查询，使用 NumberFromat 更改十进制数。这是 App.js：

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import web3 from "./web3";
import NumberFormat from 'react-number-format';

export default class PersonList extends React.Component {
  state = {
    balance: '',
    bn: '',
    persons: []
    };

  async componentDidMount() {
    const balance = await web3.eth.getBalance("0x2f6aA9e80385316eEe006AB8bB7943abF333A063") / 1e18;
    const bn = financial(balance);
    const axios = require('axios');

    function financial(x) {
      return Number.parseFloat(x).toFixed(2);
    };

    axios.get(`https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=USD`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })

    this.setState({ balance, bn });
    };

  render() {


    return (
      <div>
        <p>
          {this.state.persons.map(person => <p>"portfolioValue": {this.state.bn}, "usdeth": {person.price_usd}</p>)}
        </p>
      </div>
    );
  }
}

显示为

“portfolioValue”：0.06，“usdeth”：93.270616772

所以，我需要更改第二个值的小数位数，例如 93.27。看起来很简单，但我坚持了下来。

【问题讨论】：

我看到你不需要import NumberFormat from 'react-number-format';。看看这个。

标签： reactjs

【解决方案1】：

你遇到了一些问题：

你应该在顶部文件中require('axios')，而不是componentDidMount，这将是良好的性能。 编辑：你已经导入，所以不需要再次要求它
您的函数 financial 应该是一个实用程序，这意味着它很有用，应该在类中声明，而不是在函数 componentDidMount 中声明。
在person.price_usd，你不使用financial，所以它不起作用。

这是解决方案

import React from 'react';
import './App.css';
import axios from 'axios';
import web3 from "./web3";
// useless library
// import NumberFormat from 'react-number-format';

// Require Axios here for better performance
// const axios = require('axios');

export default class PersonList extends React.Component {
  state = {
    balance: '',
    bn: '',
    persons: []
  };

  // place here for best utilities
  financial = (x) => Number.parseFloat(x).toFixed(2);

  async componentDidMount() {
    const balance = await web3.eth.getBalance("0x2f6aA9e80385316eEe006AB8bB7943abF333A063") / 1e18;
    const bn = this.financial(balance);

    axios.get(`https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=USD`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })

    this.setState({ balance, bn });
  };

  render() {
    return (
      <div>
        <p>
          {this.state.persons.map(person =>
            <p>"portfolioValue": {this.state.bn}, "usdeth": {this.financial(person.price_usd)}</p>)
          }
        </p>
      </div>
    );
  }
}

【讨论】：

【解决方案2】：

你应该使用下面提到的代码。

render() {

    return (
        <div>
            <p>
                {this.state.persons.map(person =>
                    <p>"portfolioValue": {this.state.bn}, "usdeth": {this.financial(person.price_usd)}</p>)
                }
            </p>
        </div>
    );
}

【讨论】：