Я получаю Cannot read свойство 'упражнения' с неопределенной ошибкой при попытке сопоставить мои реквизиты

Question

Вот моя «база данных», которую я использую,

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 я передаю свойстваworkoutPlan к моему потомку Workout.js.

WorkoutPlan.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 я пытаюсь сопоставить только свойство упражнения файла WorkoutPlan.workout.exercises.,Однако, когда я запускаю этот код, я сталкиваюсь с TypeError: Не могу прочитать свойство 'упражнения' с неопределенным

Что я делаю неправильно в этом дочернем элементе?

Workout.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

Answer 1

При первом рендеринге значение props.workout, переданное Workout, равно undefined, поскольку при поиске в родительском компоненте WorkoutPlan значение по умолчанию для this.state.workoutPlan равно {}, поэтому вызов workoutPlan.workout будет`undefined.

Есть два подхода, в родительском не визуализировать этот компонент, если значение 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.