Как выполнить более одного запроса в reactjs и awsamplify

Я пытаюсь составить список запросов к более чем одной базе данных Dynamo в React.js. Я попытался определить оба компонента в разных классах и импортировать их, что не сработало, затем я попытался определить оба компонента в одном классе, что дает мне ошибку

TypeError: this.state.patients2 is undefined

Вот мои компоненты

 state = { patients2: [] }


 async componentDidMount() {
    try {
      const apiData = await API.graphql(graphqlOperation(listPatients2))
      const patients2 = apiData.data.listPatients2.items
      this.setState({ patients2 })
    } catch (err) {
      console.info('qqqqqqqqqqqqqqqqqq ', err)
    } 
  } 

 state = { beraters: [] }
  async componentWillMount2() {
    try {
      const apiData = await API.graphql(graphqlOperation(listBeraters))
      const beraters = apiData.data.listBeraters.items
      this.setState({ beraters })
      console.info(beraters)
    } catch (err) {
      console.info('qqqqqqqqqqqqqqqqq ', err

)
    }
  } 

и здесь я отображаю результаты

<h1>Meine Daten</h1>


    {
          this.state.beraters.map((rest, i) => (
            <div style = {styles.item}>
              <p style = {styles.Vorname}>{rest.Vorname}</p>
              <p style = {styles.Nachname}>{rest.Nachname}</p>
              <p style = {styles.Strasse}>{rest.Strasse}</p>
              <p style = {styles.Hausnr}>{rest.Hausnr}</p>
              <p style = {styles.Ort}>{rest.Ort}</p>
              <p style = {styles.Postleitzahl}>{rest.Postleitzahl}</p>
              <p style = {styles.Telefonnummer}>{rest.Telefonnummer}</p>
            </div>
          ))
         }
      </div>

<div >
    {
          this.state.patients2.map((rest, i) => (
            <div style = {styles.item}>
              <l style = {styles.Vorname}>{rest.Vorname}</l>
              <l>  </l>
              <l style = {styles.Nachname}>{rest.Nachname}</l>
            </div>
          ))


        }
      </div>

Любая помощь горячо приветствуется. Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши пациенты2 не определены, так как вы перезаписываете значения состояния. Просто определите свои массивы в состоянии вместе, а также вызовите свои запросы одновременно. Что-то такое:

state = {
  beraters: [],
  patients2: []
}
async componentDidMount() {
    try {
      const apiDataPatients = await API.graphql(graphqlOperation(listPatients2))
      const apiDataBeraters = await API.graphql(graphqlOperation(listBeraters))
      const patients2 = apiDataPatients.data.listPatients2.items
      const beraters = apiDataBeraters.data.listBeraters.items
      this.setState({ beraters, patients2 })
    } catch (err) {
      console.info('Error:', err)
    } 
}

Другие вопросы по теме