Почему выскакивает ошибка TypeError: scriptData is undefined?

Question

[Sanchik97]

Здравствуйте! Изучаю React и не могу понять, почему выскакивает вот такая ошибка: TypeError: scriptData is undefined; can't access its "map" property. Вот сам код

spoiler

import React, {Component} from "react";

export default class Scripts extends Component {
  render() {
    console.log(this.props);
    let { scriptData } = this.props;

    const scriptTemplate = scriptData.map(item => {
      return (
        <tr key={item.id}>
          <th scope="row">{item.id}</th>
          <td>{item.name}</td>
        </tr>
      );
    });

    return (
      <div className="container">
        <h1 className="m-5">Скрипты</h1>

        <table className="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Название</th>
              <th scope="col">Действия</th>
            </tr>
          </thead>
          <tbody>{scriptTemplate}</tbody>
        </table>
      </div>
    );
  }
}

spoiler

import React, { Component } from "react";
import "./App.css";
import Navbar from "./component/Navbar/Navbar";
import Scripts from "./component/Scripts/Scripts"

const scriptArray = [
  {
    id: 1,
    name: `Первый скрипт`
  },
  {
    id: 2,
    name: `Второй скрипт`
  },
  {
    id: 3,
    name: `Третий скрипт`
  },
  {
    id: 4,
    name: `Четвертый скрипт`
  }
];



class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Navbar />
        <Scripts scriptData={scriptArray} />
      </React.Fragment>
    );
  }
}

export default App;

Дальше компонент App рендерится в index.js

Answer 1

[Антон Спирин]

С кодом все нормально. Либо ошибка в другом месте, либо вы выполняете сборку другой версии кода.

Comments

[Sanchik97]

Есть еще один компонент - навигационная панель, может проблема в ней? Можете подсказать?

spoiler

import React from "react";
import Price from "./../Price/Price";
import Admin from "./../Admin/Admin";
import Help from "./../Help/Help";
import Scripts from "./../Scripts/Scripts";
import { Route, NavLink } from "react-router-dom";

export default class Navbar extends React.Component {
  render() {
    return (
      <React.Fragment>
        <nav className="navbar navbar-expand-lg navbar-light bg-light" style={{borderBottom:`1px solid #c8c8c8`}}>
          <div className="container">
            <NavLink
              to={{
                pathname: `/`
              }}
              className="navbar-brand mr-5"
            >
              Logo
            </NavLink>
            <button
              className="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon" />
            </button>

            <div
              className="collapse navbar-collapse"
              id="navbarSupportedContent"
            >
              <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                  <NavLink to="/component/Scripts" className="nav-link" exact>
                    <i className="fas fa-desktop mr-2" />{" "}
                    Скрипты <span className="sr-only">(current)</span>
                  </NavLink>
                </li>
                <li className="nav-item dropdown">
                  <NavLink
                    to={{
                        pathname: '/component/Help'
                    }}
                    className="nav-link dropdown-toggle"
                    id="navbarDropdown"
                    role="button"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    <i
                      className="fas fa-question mr-2"
                    />
                    Помощь
                  </NavLink>
                  <div
                    className="dropdown-menu"
                    aria-labelledby="navbarDropdown"
                  >
                    <NavLink to={{
                        pathname: `/component/Help`
                    }} className="dropdown-item">
                      Action
                    </NavLink>
                    <NavLink to={{
                        pathname: `/component/Help`
                    }} className="dropdown-item">
                      Another action
                    </NavLink>
                    <div className="dropdown-divider" />
                    <NavLink to={{
                        pathname: `/component/Help`
                    }} className="dropdown-item">
                      Something else here
                    </NavLink>
                  </div>
                </li>
                <li className="nav-item">
                  <NavLink
                    to={{
                      pathname: `/component/Price`
                    }}
                    className="nav-link"
                  >
                    <i
                      className="fas fa-dollar-sign mr-2"
                    />
                    Цены
                  </NavLink>
                </li>

                <li className="nav-item">
                  <NavLink
                    to={{
                      pathname: `/component/Admin`
                    }}
                    className="nav-link"
                  >
                    <i
                      className="fas fa-users-cog mr-2"
                    />
                    Панель Администратора
                  </NavLink>
                </li>
              </ul>
            </div>
          </div>
        </nav>

        <Route path="/" exact component={Scripts} />
        <Route path="/component/Scripts/" component={Scripts} />
        <Route path="/component/Admin/" component={Admin} />
        <Route path="/component/Help/" component={Help} />
        <Route path="/component/Price/" component={Price} />
      </React.Fragment>
    );
  }
}

[Антон Спирин]

Sanchik97, да проблема в ней.
Зачем у вас там прописаны роуты?

<Route path="/component/Scripts/" component={Scripts} />
<Route path="/component/Admin/" component={Admin} />
<Route path="/component/Help/" component={Help} />
<Route path="/component/Price/" component={Price} />

Рендерится роут Scripts, но в него не передается свойство scriptsData, поэтому и происходит ошибка.

[Sanchik97]

Антон Спирин, Спасибо!