流程 - 无法调用 `data.map` 因为 属性 `map` 在 `FetchData` [1] 中丢失
Flow - Cannot call `data.map` because property `map` is missing in `FetchData` [1]
大家好,我正在尝试将流与自定义 useFetch 挂钩结合使用。这是代码:
import React, { useState, useEffect } from 'react'
function useFetch<FetchData>(
promiseFn: () => Promise<FetchData>,
args?: any[]
) {
const [loading, setLoading] = useState(false)
const [data, setData] = useState<?FetchData>()
const [error, setError] = useState<?Error>()
useEffect(() => {
setLoading(true)
promiseFn()
.then(setData)
.catch(setError)
.finally(() => setLoading(false))
})
return {
loading,
data,
error
}
}
function fetchKeys() {
return Promise.resolve([{ name: 'myKey' }])
}
type KeysData = {
name: string
}[]
function MyKeysPage() {
const { data, loading, error } = useFetch<KeysData>(fetchKeys)
if(!data) return 'Loading...'
return data.map(key => (<div>{key.name}</div>))
}
但是它抛出一个错误:
Cannot call data.map
because property map
is missing in FetchData
[1].
你可以在这里看得更清楚:
所以我不知道如何解决这个问题。感谢您的帮助。
看起来 Flow 没有正确推断 return 类型。显式输入 useFetch
有帮助:
function useFetch<FetchData>(
promiseFn: () => Promise<FetchData>,
args?: any[]
): {data: ?FetchData, loading: bool, error: ?Error} {
// ...
}
大家好,我正在尝试将流与自定义 useFetch 挂钩结合使用。这是代码:
import React, { useState, useEffect } from 'react'
function useFetch<FetchData>(
promiseFn: () => Promise<FetchData>,
args?: any[]
) {
const [loading, setLoading] = useState(false)
const [data, setData] = useState<?FetchData>()
const [error, setError] = useState<?Error>()
useEffect(() => {
setLoading(true)
promiseFn()
.then(setData)
.catch(setError)
.finally(() => setLoading(false))
})
return {
loading,
data,
error
}
}
function fetchKeys() {
return Promise.resolve([{ name: 'myKey' }])
}
type KeysData = {
name: string
}[]
function MyKeysPage() {
const { data, loading, error } = useFetch<KeysData>(fetchKeys)
if(!data) return 'Loading...'
return data.map(key => (<div>{key.name}</div>))
}
但是它抛出一个错误:
Cannot call
data.map
because propertymap
is missing inFetchData
[1].
你可以在这里看得更清楚:
所以我不知道如何解决这个问题。感谢您的帮助。
看起来 Flow 没有正确推断 return 类型。显式输入 useFetch
有帮助:
function useFetch<FetchData>(
promiseFn: () => Promise<FetchData>,
args?: any[]
): {data: ?FetchData, loading: bool, error: ?Error} {
// ...
}