创建新组件时代码中断，现在属性未定义

Question

因此，我有一个React应用程序，其中将一些代码从App.js移到了新组件Sidebar.js，现在我的对象数组“笔记”一直以未定义的形式返回。不过，我没有更改提取内容，因此不确定它为什么无法存储。 这是一个演示项目，因此不需要完全实用。

这是我的App.js：

import React, { Component } from "react";
import classNames from "classnames";
import logo from "./logo.svg";
import checkMark from "./check-mark.svg";
import "./App.css";
import Sidebar from "./components/Sidebar.js";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      notes: [],
      currentNoteIndex: 0
    };
    this.markAsRead = this.markAsRead.bind(this);
    this.selectNote = this.selectNote.bind(this);
    
    console.log("Test started 2.25.19 19:23");
  }
  
  componentWillMount() {
    fetch('/notes')
	.then(response => response.json())
    .then(
		notes => {
			this.setState({
				notes: notes,
				currentNoteIndex: 0
			})
    }
  )
  .then(console.log(this.notes))
	.catch(
		error => {
			console.log('Ooops!');
			console.log(error);
		}
	);
  }

  
  markAsRead() {
    this.setState(currentState => {
      let marked = {
        ...currentState.notes[currentState.currentNoteIndex],
        read: true
      };
      let notes = [...currentState.notes];
      notes[currentState.currentNoteIndex] = marked;
      return { ...currentState, notes };
    });
  }

  
  selectNote(e) {
    this.setState({ currentNoteIndex: parseInt(e.currentTarget.id, 10) });

  }

  getTotalUnread() {
    let unreadArray = this.state.notes.filter(note => {
    return note.read === false;
    })
    return unreadArray.length;
    }

    getNotesRows() {
      return this.state.notes.map(note => (
        <div
          key={note.subject}
          className={classNames("NotesSidebarItem", {
            selected:
              this.state.notes.indexOf(note) === this.state.currentNoteIndex
          })}
          onClick={this.selectNote}
          
          id={this.state.notes.indexOf(note)}
        >
          <h4 className="NotesSidebarItem-title">{note.subject}</h4>
          {note.read && <img alt="Check Mark" src={checkMark} />}
        </div>
      ));
    }

  // TODO this component should be broken into separate components.

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Notes Viewer Test App</h1>
          <div>
            Unread:
            <span className="App-title-unread-count">
              {this.getTotalUnread()}
            </span>
          </div>
        </header>
        <div className="Container">
        <Sidebar getNotesRows={this.getNotesRows}/>
        <section className="NoteDetails">
  {this.state.notes.length > 0 && (
    <h3 className="NoteDetails-title">
      {this.state.notes[this.state.currentNoteIndex].subject}
    </h3>
  )}
  {this.state.notes.length > 0 && (
    <p className="NoteDetails-subject">
      {this.state.notes[this.state.currentNoteIndex].body}
    </p>
  )}
  {this.state.notes.length > 0 && (
    <button onClick={this.markAsRead}>Mark as read</button>
  )}
  {this.state.notes.length <= 0 && (
    <p>
    No Notes!
    </p>
  )}
</section>
</div>
</div>
    );
  }
}

export default App;

这是我的Sidebar.js

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

class Sidebar extends React.Component{
    
    
    render(){
        return (
            <section className="NotesSidebar">
                <h2 className="NotesSidebar-title">Available Notes:</h2>
                <div className="NotesSidebar-list">{this.props.getNotesRows()}</div>
            </section>
)}}

export default Sidebar;

我一直收到错误消息'TypeError：无法读取未定义的属性'notes'，因此我认为问题与我的提取有关，但我不确定