javascript - Recharts の別のコンポーネントからデータを取得する

Question

したがって、2 つのコンポーネント (index.jsとStats.js) があります。統計の中に Recharts の円グラフがあり、データ配列はそのファイルの中にあります。data 内の'Value'オブジェクトは任意の数値ですが、 内の他のオブジェクトの状態からその値を取得したいと考えていますindex.js。内部には、状態値index.jsを持つ 3 つのオブジェクトがあります。proteins, fats, carbsこれらの値を取得して、データ配列の中に入れたいと思います。

これはコードがどのように見え、エラーなしで実行されるかです: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Row, Col } from 'reactstrap';
import { Header } from "./Header.js";
import { Info } from "./Info.js";
import { Forms } from "./Forms.js";
import { Stats } from "./Stats.js";


class Macros extends React.Component{

constructor(props){
    super(props);

    this.state = {
        age: '',
        weight: '',
        gender: 'male',
        feet: '',
        inches: '',
        BMR: 0,
        activity: 'sedentary',
        goal: 'lose',
        TDEE: 0,
        fatsP: .20,
        carbsP: .40,
        proteinsP: .40,
        fatsG: 100,
        carbsG: 300,
        proteinsG: 100,
    };

    this.handleGenderChange = this.handleGenderChange.bind(this);
    this.handleAgeChange = this.handleAgeChange.bind(this);
    this.handleWeightChange = this.handleWeightChange.bind(this);
    this.handleFeetChange = this.handleFeetChange.bind(this);
    this.handleInchChange = this.handleInchChange.bind(this);
    this.handleActivityChange = this.handleActivityChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.calculateBMR = this.calculateBMR.bind(this);
    this.calculateGrams = this.calculateGrams.bind(this);

}

handleGenderChange(event) {
    this.setState({gender: event.target.value});
}
handleAgeChange(event) {
    this.setState({age: event.target.value});
}
handleWeightChange(event) {
    this.setState({weight: event.target.value});
}
handleFeetChange(event) {
    this.setState({feet: event.target.value});
}
handleInchChange(event) {
    this.setState({inches: event.target.value});
}
handleActivityChange(event) {
    this.setState({activity: event.target.value});
}
handleSubmit(event) {
    event.preventDefault();
    this.calculateBMR();
}

calculateBMR(callback) {
    let calBMR = 0;
    let calTDEE = 0;
    if(this.state.gender === 'male'){
        calBMR = ((10 * ((this.state.weight) / 2.20462)) + 
            (6.25 * ((this.state.feet * 30.48) + (this.state.inches * 2.54))) - 
            (5 * this.state.age)) + 5;
    }
    else {
        calBMR = ((10 * ((this.state.weight) / 2.20462)) + 
            (6.25 * ((this.state.feet * 30.48) + (this.state.inches * 2.54))) - 
            (5 * this.state.age)) - 161;
    }
    if(this.state.activity === 'sedentary'){
        calTDEE = calBMR * 1.2;
    }
    else if(this.state.activity == 'light'){
        calTDEE = calBMR * 1.3;
    }
    else if(this.state.activity == 'moderate'){
        calTDEE = calBMR * 1.5;
    }
    else if(this.state.activity == 'active'){
        calTDEE = calBMR * 1.7;
    }
    else{
        calTDEE = calBMR * 1.9;
    }

    this.setState({BMR: Math.floor(calBMR), TDEE: Math.floor(calTDEE)}, callback);
    this.calculateGrams();
}

calculateGrams(callback){
    let fatsG = (this.state.TDEE * this.state.fatsP) / 9;
    let carbsG = (this.state.TDEE * this.state.carbsP) / 4;
    let proteinsG = (this.state.TDEE * this.state.proteinsP) / 4;

    this.setState({fatsG: Math.floor(fatsG), carbsG: Math.floor(carbsG), proteinsG: Math.floor(proteinsG)});
}

render(){
    return(
        <Container>
            <Row>
                <Col>
                    <Header />
                </Col>
            </Row>
            <Row>
                <Col xs="4"><Info /></Col>
                <Col xs="4"><Forms onGenderChange={this.handleGenderChange}
                                gender={this.state.gender} onAgeChange={this.handleAgeChange}
                                onWeightChange={this.handleWeightChange} onFeetChange={this.handleFeetChange}
                                onInchChange={this.handleInchChange} onActivityChange={this.handleActivityChange}
                                onSubmit={this.handleSubmit}
                            />
                </Col>
                <Col xs="4"><Stats gender={this.state.gender} age={this.state.age}
                                weight={this.state.weight} feet={this.state.feet}
                                inches={this.state.inches} activity={this.state.activity}
                                BMR={this.state.BMR} TDEE={this.state.TDEE}
                                carbsP={this.state.carbsP} fatsP={this.state.fatsP}
                                proteinsP={this.state.proteinsP} carbsG={this.state.carbsG}
                                fatsG={this.state.fatsG} proteinsG={this.state.proteinsG}
                            />
                </Col>
            </Row>
        </Container>
    )
}
}

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

Stats.js

import React from 'react';
import { Progress } from 'reactstrap';
import {PieChart, Pie, Legend} from 'recharts';

const data02 = [{name: 'Carbs', value:100},
                {name: 'Fats', value: 300},
               {name: 'Proteins', value: 100}]

export class Stats extends React.Component{
    render(){
        return(
            <div>
                <h3>Your Stats</h3>

            <PieChart width={350} height={350}>
                <Pie data={data02} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label/>
            </PieChart>

        </div>
    );
  }
}

Stats.js配列の下でこれを実行してdata02、carbsG fatsG と proteinG の状態を取得しようとしましたが、値を取得できませんでした

import React from 'react';
import { Progress } from 'reactstrap';
import {PieChart, Pie, Legend} from 'recharts';

const data02 = [{name: 'Carbs', value:this.props.carbsG},
                {name: 'Fats', value: this.props.fatsG},
               {name: 'Proteins', value: this.props.proteinsG}]

export class Stats extends React.Component{
    render(){
        return(
            <div>
                <h3>Your Stats</h3>

            <PieChart width={350} height={350}>
                <Pie data={data02} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label/>
            </PieChart>

        </div>
    );
  }
}