问如何解决未定义的TypeError:类扩展值未定义不是构造函数或null？

EN

import React from 'react'
import Flashcard from './Flashcard'
import NameForm from './NameForm'
import flashcards from './App'

export default class FLashcardList extends React.Component ({ flashcards }) {
  // taking in the flashcards as destructured props so we dont have to make a props. variable
  constructor(props) {
    super(props);
    this.state = {username: ''};
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange = (event) => {
    this.setState({username: event.target.value});

  }

  render() {

      return (
        <div>
        <NameForm onChoose={this.handleChange} />

        
        <div className='card-grid'> 

          {flashcards.map(flashcard => { // loops through the flashcards api and maps each one to flashcard

  return <Flashcard flashcard={flashcard} key={flashcard.id} choice={this.state.username} /> // each flashcard is then passed down to the "Flashcard.js" component we created returned w a unique id
  })}
        </div>
      </div>
    )
  }

}

import React from 'react'
import Flashcard from './Flashcard'

export default function FLashcardList({ flashcards }) {
  // taking in the flashcards as destructured props so we dont have to make a props. variable
  return (

    // card-grid is a container so we can put all the cards in a grid to ensure they change in size proportionally to the size of the window //
    <div className='card-grid'> 

      {flashcards.map(flashcard => { // loops through the flashcards api and maps each one to flashcard

          return <Flashcard flashcard={flashcard} key={flashcard.id} /> // each flashcard is then passed down to the "Flashcard.js" component we created returned w a unique id
      })}
    </div>
  )
}