Постоянно получаю неопределенную ошибку в React и усиливаем

Question

Я пытаюсь выполнить запрос списка в базе данных динамо в моем проекте реагирования, но получаю следующую ошибку

TypeError: patients is undefined
render
C:/Health Project/nutzer-system/src/PatientComponents/listPatients.js:62

  59 | console.log(patients)
  60 | return (
  61 |     <div className={classes.root}>
> 62 |   <Grid container className={classes.root} spacing={16}>
     | ^  63 |   {patients.map( patient => (
  64 |          <Grid key={patient.id} patient>
  65 |              <Card className={classes.card}>

вот еще немного моего кода

state = {
        patients: []
      }

      componentDidMount = () => {
        this.getPatients()
      }

      getPatients = () => {
        API.graphql(graphqlOperation(queries.listPatients))
        .then(data => this.setState({patients: data.data.listPatients.patients}))
      };

  render(){
    const { classes } = this.props; 
    const { patients } = this.state;
    console.log(patients)
    return (
        <div className={classes.root}>
      <Grid container className={classes.root} spacing={16}>
      {patients.map( patient => (
             <Grid key={patient.id} patient>
                 <Card className={classes.card}>
                   <CardContent>
                   <Typography className={classes.title} color="textSecondary" gutterBottom>
                       {patient.Vorname}
                     </Typography>
                     <Typography component="p">
                       {patient.Nachname}
                     </Typography>
                     <Typography component="p">
                       {patient.Strasse}
                     </Typography>

Если вам нужно увидеть больше кода, просто скажите, и я добавлю его. Я не могу понять, как решить эту проблему. Любая помощь в решении этого будет высоко ценится. Спасибо!

Answer 1

this.state.patients заполняется асинхронно, что означает, что вы должны убедиться, что его значение по умолчанию является пустым массивом, таким образом, render() не получит ошибку времени выполнения, даже если вы попытаетесь в Patient.map. Думайте об этом как [].map, но undefined.map не работает. Попробуйте это:

заменить

const { patients } = this.state;

с

const { patients = [] } = this.state;