Блог

Я пытаюсь отобразить количество элементов, полученных в результате пользовательского крючка. Этот обычай требует некоторого времени для извлечения данных из базы данных и возвращает количество (т. Е. любое целое число, большее или равное нулю).

Моя текущая настройка состоит в том, чтобы вызвать пользовательский хук и вставить это значение в хук useState для отображения текущего количества элементов.

Однако это не работает. В настоящее время происходит то, что возвращается только первый элемент из пользовательского крючка, а не обновленный элемент.

 // A React Component // gamePlays holds the amount of items returned from the useLoadSpecficRecords hook. // However, when data initially loads, the length is `0`, but when loading is finished, the length may increase.  // This increased length is not represented in the gamePlays variable. const gamePlays = useLoadSpecficRecords(today).games.length  // I want to set the initial value of selected to the number of game plays, but only  // `0` is being returned const [selected, setSelected] = useState({  count: gamePlays, })  // This useEffect hook and placed gamePlays as a dependency, but that did not update the value.  useEffect(() =gt; {  }, [gamePlays])   

Это журналы, указывающие на то, что длина загружается, но не обновляется в переменной gamePlays:

 0 0 0 0 0 2  

 // useLoadSpecficRecords Hook  import { useState, useEffect } from 'react' import { API, Auth } from 'aws-amplify' import { listRecordGames } from '../graphql/queries'  // Centralizes modal control const useLoadSpecficRecords = (date) =gt; {  const [loading, setLoading] = useState(true)  const [games, setData] = useState([])   useEffect(() =gt; {  fetchGames(date)  // eslint-disable-next-line react-hooks/exhaustive-deps  }, [date])   const fetchGames = async (date) =gt; {  try {  const formatedDate = await date    let records = await API.graphql({  query: listRecordGames,  variables: {  filter: {  owner: { eq: username },  createdAt: { contains: formatedDate },  },  },  })   const allGames = records.data.listRecordGames.items  const filteredGames = allGames.map(({ name, players, winners }) =gt; {  return {  gameName: name,  players: players,  winners: winners,  }  })   setLoading(false)  setData(filteredGames)  } catch (err) {  console.error(err)  }  }   return { games, loading } }  export default useLoadSpecficRecords   

В эффекте использования в ваших пользовательских регистрах загрузок для подключения измените список зависимостей с даты на игры. Это должно привести к повторному запуску эффекта использования, и вы должны увидеть обновленные данные.

 Here is the new implementation:   import { useState, useEffect } from 'react'; import { API, Auth } from 'aws-amplify'; import { listRecordGames } from '../graphql/queries';  // Centralizes modal control const useLoadSpecficRecords = (date) =gt; {  const [loading, setLoading] = useState(true);  const [games, setData] = useState([]);   useEffect(() =gt; {  fetchGames(date);  // eslint-disable-next-line react-hooks/exhaustive-deps  }, [games]); lt;-- dependency list updated!   const fetchGames = async (date) =gt; {  try {  const formatedDate = date;   let records = await API.graphql({  query: listRecordGames,  variables: {  filter: {  owner: { eq: username },  createdAt: { contains: formatedDate },  },  },  });   const allGames = records.data.listRecordGames.items;   const filteredGames = allGames.map(({ name, players, winners }) =gt; {  return {  gameName: name,  players: players,  winners: winners,  };  });   setLoading(false);  setData(filteredGames);  } catch (err) {  console.error(err);  }  };   return { games, loading }; };  export default useLoadSpecficRecords;  

Я также удалил ненужное ожидание, которое у вас было до даты в строке 17.