所以我有两个组件(index.js
和Stats.js
)。在统计信息中,我有一个来自 Recharts 的饼图,数据数组位于该文件中。data 中的'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'));
统计.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>
);
}
}