如何在数据加载时重新呈现自定义钩子的结果

Question

我试图呈现自定义钩子产生的项目数量。此自定义需要一些时间从数据库中获取数据并返回一个计数(即:大于或等于0的任何整数)。

我当前的设置是调用自定义钩子并将该值推入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(() => {
}, [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) => {
const [loading, setLoading] = useState(true)
const [games, setData] = useState([])
useEffect(() => {
fetchGames(date)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [date])
const fetchGames = async (date) => {
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 }) => {
return {
gameName: name,
players: players,
winners: winners,
}
})
setLoading(false)
setData(filteredGames)
} catch (err) {
console.error(err)
}
}
return { games, loading }
}
export default useLoadSpecficRecords

Answer 1

在useEffect在你的自定义钩子useLoadSpecficRecords，更改依赖列表从日期到游戏． 这应该会重新触发useEffect，您应该会看到更新后的数据。

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) => {
const [loading, setLoading] = useState(true);
const [games, setData] = useState([]);
useEffect(() => {
fetchGames(date);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [games]); <-- dependency list updated!
const fetchGames = async (date) => {
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 }) => {
return {
gameName: name,
players: players,
winners: winners,
};
});
setLoading(false);
setData(filteredGames);
} catch (err) {
console.error(err);
}
};
return { games, loading };
};
export default useLoadSpecficRecords;

我还删除了在日期之前不必要的等待。第17行