从 Recharts 的另一个组件中获取数据

Question

所以我有两个组件（index.js 和 Stats.js）。在 stats 中，我有一个来自 Recharts 的饼图，数据数组在该文件中。数据中的 'Value' 对象只是一个任意数字，但我想从 index.js 中的其他对象的状态中获取该值。在 index.js 内部，我有三个对象： 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>
    );
  }
}

我尝试在 data02 数组下的 Stats.js 中执行此操作以获取 carbsG fatsG 和 proteinsG 的状态，但无法获取值

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>
    );
  }
}

Answer 1

您无法在 React 组件外部访问 this.props。

将您的代码更改为此。

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

export class Stats extends React.Component{
    constructor(props) {
      super(props)
      
      this.state = {
        data02: []
      }
    }
    
    componentDidMount() {
      this.setState({
        data02: [...this.state.data02,
            {name: 'Carbs', value:this.props.carbsG},
            {name: 'Fats', value: this.props.fatsG},
            {name: 'Proteins', value: this.props.proteinsG}]
      })
    }
    render(){
        return(
            <div>
                <h3>Your Stats</h3>

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

        </div>
    );
  }
}

从 Recharts 的另一个组件中获取数据

Grab data from another component for Recharts

javascript

reactjs

recharts