在状态值上添加数字并呈现结果

Question

渲染的图似乎不加起来。我该如何写得更好？

此处的目的是在每次调用状态值时将100美元的服务费添加到该状态值中，以获取应付的总额并在下方的“付款”按钮中显示该数字。

我是用react编写的。

import React from 'react';
import './Data.css';
import TopMenu from '../../TopMenu/TopMenu';

class Data extends React.Component {

    state = {
        amount: Number,
        disco: '',
        charge: 100,
    }

    componentDidMount() {
        const amount = localStorage.getItem('amount') || '';
        this.setState({amount});
        const disco = localStorage.getItem('disco') || '';
        this.setState({disco});
    }

    render() {
        let charge = 100.00;
        const myValue = this.state.amount + charge;

        return (
            <div className="container">
                <div className="underlay">
                    <TopMenu />
                </div>
                <div className="main">
                    <div className="data_canvas">
                        <div className="header">
                            <h2>Preview</h2> <br />
                            <h5>Subscription details</h5>
                            <hr />
                        </div>
                        <div className="data_content">
                            <h4>Distribution Company</h4>
                            <br />
                            <h3>{this.state.disco}</h3>
                        </div>
                        <div className="data_content">
                            <h4>Meter Number</h4>
                            <br />
                            <h3>54150686738</h3>
                        </div>
                        <div className="data_content">
                            <h4>Account Number</h4>
                            <br />
                            <h3>093457892</h3>
                        </div>
                        <div className="data_content">
                            <h4>Type</h4>
                            <br />
                            <h3>Prepaid</h3>
                        </div>
                        <div className="data_content">
                            <h4>Account Name</h4>
                            <br />
                            <h3>Adeola Oni</h3>
                        </div>
                        <div className="data_content">
                            <h4>Registered Number</h4>
                            <br />
                            <h3>09027663173</h3>
                        </div>
                        <div className="data_content">
                            <h4>Meter Address</h4>
                            <br />
                            <h3>19, Oremeta Street<br />Oregun, Lagos.</h3>
                        </div>
                        <div className="data_content">
                            <h4>Amount[₦]</h4>
                            <br />
                            <h3>{this.state.amount}</h3>
                        </div>
                        <div className="data_content">
                            <div className="tooltip">
                                <h6>+ Convenience charge: ₦100<br />What is convenience charge? Click here <span
                                    className="tooltiptext">A CBN charge plus transaction cost for fund transfer within banks and this platform. Thank you for your understanding.</span>
                                </h6>

                            </div>
                        </div>
                        <div className="data_button">
                            <button>Back</button>
                            <button>Pay total + {myValue} </button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Data;

Answer 1

这是因为您的this.state.amount是字符串。通过使用typeof进行检查。

您可以执行此操作以使其正常工作-

const myValue = parseInt(this.state.amount, 10) + charge;

Answer 2

这有效

let charge = 100.00;
const myValue =  parseFloat(this.state.amount )+ charge;