Реагировать приложение не удалось отобразить список из объектов. Получение этой ошибки: TypeError: Невозможно прочитать свойство '0' из неопределенного

Question

Я делаю здесь курс React, и начальные файлы продолжают выдавать мне эту ошибку:

TypeError: Невозможно прочитать свойство '0' из неопределенного

Из этогостартовый код:

import React from 'react'
import ReactDOM from 'react-dom'

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only Javascript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <App notes={notes} />,
  document.getElementById('root')
)

Приведенный выше код показывает:

Попытка ошибки импорта: «./App» не содержит экспорт по умолчанию (импортируется как «Приложение»)

Я попытался изменить, добавив приложение по умолчанию для экспорта, и получил:

Ошибка типа: невозможно прочитать свойство '0' из неопределенного

Как решить эту проблемупроблема?

Answer 1

Код из ссылка , на которую вы ссылаетесь, является полным файлом index.js.

Если вы хотите, чтобы ваш код был модульным, и вы хотите отделить App компонент, вв этом случае вы должны сделать это,

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import App from "./App";   //import your component (imported without { }, because App component exported as default)

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only Javascript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

//Pass the props here
render(<App notes={notes}/>, document.getElementById('root'));

App.js

import React from 'react'

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
      </ul>
    </div>
  )
}

export default App

Демо

Answer 2

Хорошо. Я решил проблему с помощью этого кода в файле index.js и удалил файл App.js. Кажется, что курс хочет, чтобы код был в index.js. Я был в замешательстве, так как думал, что стандартной практикой является размещение компонентов вашего приложения в файле App.js, а index.js остается один?