![](/img/trans.png)
[英]TypeError: Cannot read property 'map' of undefined is showing when I'm trying to map over the props passed from parent component to child component
[英]I'm getting a Cannot read property of 'exercises' of undefined error when trying to map my props
这是我正在使用的“数据库”,
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
}
]
}
]
}
};
然后在我的 WorkoutPlan.js 文件中,我将锻炼计划的属性传递给我的 Workout.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;
在我的 Workout.js 文件中,我只尝试 map WorkoutPlan.workout.exercises 的练习属性。 但是,当我运行此代码时,我遇到了 TypeError: Cannot read property 'exercises' of undefined
我在这个孩子身上做错了什么?
锻炼.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;
我已经注释掉了 const,因为有人告诉我它们都是可以互换的方法。 但是,如果有人真的可以提供一些关于如何在这两种方法上做到这一点的见解,我将不胜感激。 该错误具体指
props.workout.exercises.map(exercises => {
在我的 Workout.JS 文件中
在第一次渲染时,传递给Workout
的props.workout
值是undefined
的,因为在父组件WorkoutPlan
中查看this.state.workoutPlan
的默认值是{}
,因此调用锻炼计划workoutPlan.workout
将是“未定义的”。
有两种方法,如果值为undefined
,则在父级中不渲染此组件。 或者,在孩子中,处理undefined
的值。
在父母中处理:
render() {
const { workout } = this.state.workoutPlan;
return (
<div>
<h1>{workoutPlan.Name}</h1>
{workout && <Workout workout={workout} />}
</div>
)
}
或者,在孩子身上:
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>
);
});
}
注意,您还需要return
props.workout.exercises.map
值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.