reactjs expo react-native中可能的未处理Promise拒绝

eit6fx6z  于 2023-04-29  发布在  React
关注(0)|答案(1)|浏览(127)

我试图从react-native中的Django rest framework后端获取数据,但当应用程序在expo中启动时,一直得到这个错误。我看不出我的函数promise有什么问题,也许我看它的方式不对,因为我是JavaScript的新手。

const HomeScreen = () => {
    //const navigation = useNavigation()
  const [data, setData] = useState([])

  useEffect(() =>{
      fetchData()
   }, [])

   const fetchData = async()=>{
      const response =  await fetch('http://127.0.0.1:8000/estate-list/')
      const data = await response.json()
      setData(data)
   }

    return (
   
      <View style={styles.screen}>
        <HomeList data={data} />
      
      </View>
     
    );
}

主屏幕列表组件

const HomeList= ({data}) => {
    const renderItem = ({item}) =>{
        return <ListItem 
        price={item.price} 
        title={item.title} 
        description={item.description} />
    }
    return (
        <View>
            <FlatList
             
             data={data}
             keyExtractor={item => item.id}
             renderItem={renderItem}
             refreshControl={
                <RefreshControl 
                refreshing= {false} 
                onRefresh={() => console.log("Refreshing.....!")} />
             }
            />
          
        </View>
    );
}

ListItem组件

const ListItem = ({ id, title, description,}) => {
     const navigation = useNavigation()
    return (
        <TouchableOpacity style={styles.card} 
        onPress={() => navigation.navigate('Detail View',
         { eventId: id, title, description})}>
        
            
            <Text>{title}</Text>
            <Text>{description}</Text>
             <Button title='More Info' color={'#0f172a'} />
        </TouchableOpacity>
    );
}
nlejzf6q

nlejzf6q1#

好像是fetch请求失败了。由于response对象未定义,因此响应。json()也失败了。
试试这个

const fetchData = async()=>{
  const response =  await fetch('http://127.0.0.1:8000/estate-list/').catch((error)=>{
      console.log(error);
      return;
  });
  
  if (response==undefined){
    return;
  }
  
  const data = await response.json().catch((error)=>{
      console.log(error);
  });
  setData(data)

}
如果您在控制台中获得LOG [TypeError: Network request failed]。log,则问题出在API返回的数据上。

相关问题