После того, как я добавил async function getNumbers(owner) я получаю следующую ошибку

  71 | {amp}lt;div className="App"{amp}gt; 72 | Messages for user: {owner} 73 | {amp}lt;h3{amp}gt;Numbers{amp}lt;/h3{amp}gt; {amp}gt; 74 | {amp}lt;div{amp}gt; | ^ 75 | {state.numbers.length {amp}gt; 0 ? ( 76 | state.numbers.map(number ={amp}gt; {amp}lt;p key={number.to}{amp}gt;{number.to}{amp}lt;/p{amp}gt;) 77 | ) : ( 

Причина, по-видимому, вызвана async function getNumbers(owner) .

 import Amplify, { Auth, API, graphqlOperation } from "aws-amplify"; import React, { useEffect, useReducer, useState } from "react"; import { withAuthenticator } from "aws-amplify-react"; import { messagesByToByCreatedAt, numberByOwnerByTo } from "./graphql/queries"; import awsconfig from "./aws-exports"; import "./App.css"; Amplify.configure(awsconfig); // Action Types const QUERY = "QUERY"; const initialState = { messages: [], numbers: [] }; const reducer = (state, action) ={amp}gt; { switch (action.type) { case QUERY: return { ...state, messages: action.messages, numbers: action.numbers }; default: return state; } }; function App() { const [owner, setOwner] = useState(null); const [state, dispatch] = useReducer(reducer, initialState); useEffect(() ={amp}gt; { // Get all numbers that belong to user async function getNumbers(owner) { const ownerData = await API.graphql( graphqlOperation(numberByOwnerByTo, { owner: owner }) ); dispatch({ type: QUERY, numbers: ownerData.data.numberByOwnerByTo.items }); } getNumbers("13d8fbce-8989-4dff-bdcf-2fac8926a52d"); // getMessages async function getMessages(number) { const messageData = await API.graphql( graphqlOperation(messagesByToByCreatedAt, { to: number }) ); dispatch({ type: QUERY, messages: messageData.data.messagesByToByCreatedAt.items }); } getMessages("4915735992273"); // Assign logged in user to $owner Auth.currentAuthenticatedUser({ bypassCache: false }) .then(user ={amp}gt; { setOwner(user.username); }) .catch(err ={amp}gt; console.log(err)); }, []); return ( {amp}lt;div className="App"{amp}gt; Messages for user: {owner} {amp}lt;h3{amp}gt;Numbers{amp}lt;/h3{amp}gt; {amp}lt;div{amp}gt; {state.numbers.length {amp}gt; 0 ? ( state.numbers.map(number ={amp}gt; {amp}lt;p key={number.to}{amp}gt;{number.to}{amp}lt;/p{amp}gt;) ) : ( {amp}lt;p{amp}gt;Add numbers!{amp}lt;/p{amp}gt; )} {amp}lt;/div{amp}gt; {amp}lt;h3{amp}gt;Messages{amp}lt;/h3{amp}gt; {amp}lt;div{amp}gt; {state.messages.length {amp}gt; 0 ? ( state.messages.map(message ={amp}gt; ( {amp}lt;p key={message.from}{amp}gt;{message.messageBody}{amp}lt;/p{amp}gt; )) ) : ( {amp}lt;p{amp}gt;Add messages!{amp}lt;/p{amp}gt; )} {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); } export default withAuthenticator(App, true); 

Вот как я мог это решить. Благодаря @ Арун К

 useEffect(() ={amp}gt; { // getMessages async function getData(number, owner) { const messageData = await API.graphql( graphqlOperation(messagesByToByCreatedAt, { to: number }) ); const ownerData = await API.graphql( graphqlOperation(numberByOwnerByTo, { owner: owner }) ); dispatch({ type: QUERY, numbers: ownerData.data.numberByOwnerByTo.items, messages: messageData.data.messagesByToByCreatedAt.items }); } getData("4915735992273", "13d8fbce-8989-4dff-bdcf-2fac8926a52d"); 

Мне кажется, что ownerData.data.numberByOwnerByTo.items возвращает undefined . главная проблема, кажется, в этом. Вы должны это исправить.

тогда ваш редуктор назначает undefined numbers . numbers: action.numbers

Вы можете присвоить значение, если оно не определено, или установить его в пустой массив

 return { ...state, messages: action.messages, numbers: action.numbers || [] }; 

Кроме того, состояние обновляется дважды, один раз после каждого вызова API, поэтому numbers были undefined когда компонент отображается для обновления состояния messages .

Не могли бы вы сделать одно обновление состояния после получения как сообщений, так и номеров.

 dispatch({ type: QUERY, numbers: ownerData.data.numberByOwnerByTo.items, messages: messageData.data.messagesByToByCreatedAt.items });