Flow - 无法调用 `data.map`，因为 `FetchData` [1] 中缺少属性 `map`答案

【问题标题】：Flow - Cannot call `data.map` because property `map` is missing in `FetchData` [1]Flow - 无法调用 `data.map`，因为 `FetchData` [1] 中缺少属性 `map`
【发布时间】：2019-05-16 16:23:12
【问题描述】：

大家好，我正在尝试使用带有自定义 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>))
}

但是它抛出了一个错误：

无法调用data.map，因为FetchData [1] 中缺少属性map。

您可以在这里更好地查看：

https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDGMA0cDecCuAzkgMowoxLZFICiAZvUhnAL5z1QQhwDkUqDLwBQw+vgB2GYBAkFiAMSQw0ACwA8SlaoAiFFAD4AFMLhwwXEMEUSAXHCMBKOAF4DcAAqXrSTcrV65AaYpnAoUADmhAD89igSAJ4A2gC6ws44oWiyhPBJADYQKAAmwBIR2MQwADJFpeUprvKk5JRG9Cj5xI5ZOXnF+pXKgSiNLs1kFL7RWgH6xj1m2RK5cElIUFxQQzC0m9BjE63Te1sLomY0DEwYRk6u7plmZlW1JWURRjBQ+Eg9oWYLNwfAoJE4Ac8AHQwVRIMFVEaLZ5mSFoChqIxVU7QJHIyH0MqdfIJO7ONxwV51D7tTrdJGsf5mAQwfBQORPZ6Fd7lELIgbkXnPDZbUKsYRisxiSTSWQcfyqADSSAShHuHLgzNZci8wOIkIEhAg+QAbkgjEk8BIUCAkPZeCAEkqErw2Ckeuw4KFhDAEmAkHAnYQRk0OVabfZclAPuLUpLJeIpDAZHIALKO5WEDwoCJmjLCACQy1WeH5KGwXPqFTgwugbCaNFmGkDI2MTG0gdxnuRwHoRgAhKXnJq2Xw3pXIRORBDh3JS5CQCgwEYANbKh4OdSlY0GHCrhKQsNIVjqAD0W4MjndQA

所以我不知道如何解决这个问题。感谢您的帮助。

【问题讨论】：

标签： javascript reactjs flowtype

【解决方案1】：

看起来 Flow 没有正确推断返回类型。显式输入useFetch 有帮助：

function useFetch<FetchData>(
  promiseFn: () => Promise<FetchData>,
  args?: any[]
): {data: ?FetchData, loading: bool, error: ?Error} {
  // ...
}

Playground link.

【讨论】：

非常感谢。