[英]I'm getting a Cannot read property of 'exercises' of undefined error when trying to map my props
Here's my "database" that I'm using,这是我正在使用的“数据库”,
index.js: index.js:
const workoutPlan = {
ID: 1,
Name: "My Workout Plan",
workout: {
day: "Monday",
exercises: [
{
Name: "Bench Press",
sets: [
{
set: 1,
weight: 135,
rep: 10
},
{
set: 2,
weight: 145,
rep: 8
}
]
},
{
Name: "Deadlift",
sets: [
{
set: 1,
weight: 135,
rep: 10
},
{
set: 2,
weight: 145,
rep: 8
}
]
}
]
}
};
Which then in my WorkoutPlan.js file, I'm passing the properties of the workoutPlan to my Workout.js child.然后在我的 WorkoutPlan.js 文件中,我将锻炼计划的属性传递给我的 Workout.js 孩子。
WorkoutPlan.js:锻炼计划.js:
import React from "react";
import Workout from "./Workout";
import axios from "axios";
class WorkoutPlan extends React.Component {
constructor() {
super();
this.state = {
workoutPlan: {}
};
}
componentDidMount() {
axios
.get("/api/workout-plan")
.then(response => {
this.setState({ workoutPlan: response.data });
})
.catch(error => {
console.log(error);
});
}
render() {
const { workoutPlan } = this.state;
// const workoutPlan = this.state.workoutPlan;
return (
<div>
<h1>{workoutPlan.Name}</h1>
<Workout workout={workoutPlan.workout} />
</div>
);
}
}
export default WorkoutPlan;
In my Workout.js file, I'm trying to only map the exercises property of WorkoutPlan.workout.exercises.在我的 Workout.js 文件中,我只尝试 map WorkoutPlan.workout.exercises 的练习属性。 However, when I run this code, I'm running into a TypeError: Cannot read property 'exercises' of undefined
但是,当我运行此代码时,我遇到了 TypeError: Cannot read property 'exercises' of undefined
What am I doing wrong in this Child?我在这个孩子身上做错了什么?
Workout.js:锻炼.js:
import React from "react";
import Exercise from "./Exercise";
// const Workout = props => {
// props.workout.exercises.map(exercises => {
// return (
// <div>
// <h2>"Workout for {props.day}"</h2>
// <Exercise exercises={exercises} />
// </div>
// );
// });
// };
function Workout(props) {
props.workout.exercises.map(exercises => {
return (
<div>
<h2>"Workout for {props.day}"</h2>
<p>{exercises.Name}</p>
<Exercise exercises={exercises} />
</div>
);
});
}
export default Workout;
I've commented out the const, as I'm told that they're both methods are interchangeable.我已经注释掉了 const,因为有人告诉我它们都是可以互换的方法。 But if someone could actually provide some insight on how to do it on both methods, I'd be so grateful.
但是,如果有人真的可以提供一些关于如何在这两种方法上做到这一点的见解,我将不胜感激。 The error is specifically referring to
该错误具体指
props.workout.exercises.map(exercises => {
in my Workout.JS file在我的 Workout.JS 文件中
On the first render, the props.workout
value passed to the Workout
is undefined
because looking in the parent component WorkoutPlan
the default value for this.state.workoutPlan
is {}
so calling workoutPlan.workout
will be `undefined.在第一次渲染时,传递给
Workout
的props.workout
值是undefined
的,因为在父组件WorkoutPlan
中查看this.state.workoutPlan
的默认值是{}
,因此调用锻炼计划workoutPlan.workout
将是“未定义的”。
There are two approaches, in the parent don't render this component if the value is undefined
.有两种方法,如果值为
undefined
,则在父级中不渲染此组件。 Or, in the child, handle the value of undefined
.或者,在孩子中,处理
undefined
的值。
Handling in the parent:在父母中处理:
render() {
const { workout } = this.state.workoutPlan;
return (
<div>
<h1>{workoutPlan.Name}</h1>
{workout && <Workout workout={workout} />}
</div>
)
}
Or, in the child:或者,在孩子身上:
function Workout(props) {
// Early return if falsy value is passed (eg: undefined, null)
if (!props.workout) return null;
return props.workout.exercises.map(exercises => {
return (
<div>
<h2>"Workout for {props.day}"</h2>
<p>{exercises.Name}</p>
<Exercise exercises={exercises} />
</div>
);
});
}
Note, you also need to return
the props.workout.exercises.map
value.注意,您还需要
return
props.workout.exercises.map
值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.