Как я могу использовать useReducer для назначения начального состояния после вызова пользовательской ловушки Datafetch? Я продолжаю получать ноль

Question

Я создал пользовательский хук datafetch, но когда я использую функцию редуктора, чтобы установить его в качестве исходного состояния, он говорит, что он нулевой.

Компонент, где я вызываю пользовательский хук.

const collection = 'items'
const whereClause = { array: "lists", compare: 'array-contains', value: 'Pantry' }
const res = useDataFetchWhere(collection, whereClause)
const data = res.response
const [state, dispatch] = useReducer(reducer, data)

Когда я console.log (состояние) я получаю нулевое значение.

Мой пользовательский хук извлечения данных

const useDataFetchWhere = (collection, whereClause) => {

    const [response, setResponse] = useState(null)
    const [error, setError] = useState(null)
    const [isLoading, setIsLoading] = useState(false)


    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true)
            setError(false)
            try {
                await db.collection(collection).where(whereClause.array, whereClause.compare, whereClause.value).get()
                    .then(data => {
                        setResponse(data.docs.map(doc => ({ ...doc.data(), id: doc.id })))
                        setIsLoading(false)
                        console.log('hello where')
                    })

            } catch (error) {
                setError(error)
            }
        }
        fetchData()
        return function cleanup() {
            console.log('cleaned up check')
        };
    }, [])

    return { response, error, isLoading }
}

Есть ли что-то, что мне нужно сделать или позвонить по-другому?

Спасибо.

Answer 1

Проблема в том, что useDataFetchWhere не сразу возвращает результат выборки данных, а только через некоторое время, когда запрос выполнен, и тогда setResponse установит фактические данные. Поэтому вы не можете установить ответ в качестве начального состояния для вызова useReducer.

Вам нужно подождать, пока запрос не будет выполнен, прежде чем использовать его результат. Вы можете создать действие (например, SET_DATA) для редуктора, который устанавливает результат, как только он будет достигнут.

У вас уже есть флаг isLoading:

const [state, dispatch] = useReducer(reducer, null);

useEffect(() => {
  if (!isLoading) {
    const data = res.response;
    dispatch({type: 'SET_DATA', data});
  }
}, [isLoading]);