類型錯誤：未定義不是對象（評估“data.filter”）-React Native

Question

我是 React/編程的新手，無法獲取/顯示數據。 我的代碼返回以下錯誤。 提前感謝您的幫助。

類型錯誤：類型錯誤：未定義不是對象（評估“data.filter”）

  import useFetch from 'react-fetch-hook'

  const { data } = useFetch('http://192.168.2.94:3000/list-categories')

  const locations = props.navigation.getParam('locationId')

  const displayedCategories = data.filter(      // ERROR HERE
    cat => cat.locId.indexOf(locations) >= 0
  )

  const renderGridItem = itemData => {
    return (
      <CategoryGridTile
        image={itemData.item.image}
        title={itemData.item.title}
      />
    )
  }

  return (
    <FlatList
      keyExtractor={(item, index) => item.id}
      data={displayedCategories}
      renderItem={renderGridItem}
    />
  )
}

Answer 1

useFetch您返回一個isLoading標志以及您必須使用的數據來顯示加載指示器，直到數據可用

const { isLoading, data } = useFetch('http://192.168.2.94:3000/list-categories');
 if(isLoading) {
    return <span>Loading...</span>
 }
 const locations = props.navigation.getParam('locationId')

  const displayedCategories = data.filter(
    cat => cat.locId.indexOf(locations) >= 0
  )

  const renderGridItem = itemData => {
    return (
      <CategoryGridTile
        image={itemData.item.image}
        title={itemData.item.title}
      />
    )
  }

  return (
    <FlatList
      keyExtractor={(item, index) => item.id}
      data={displayedCategories}
      renderItem={renderGridItem}
    />
  )

Answer 2

我認為一開始沒有數據所以請使用默認分配

  const { data = [] } = useFetch('http://192.168.2.94:3000/list-categories')

更新

  const displayedCategories = data.filter(
    cat => cat && cat.locId && cat.locId.indexOf(locations) >= 0
  )