اذهب إلى المحتوى
  • 0

احاول ان اعمل fetch ل api بسيط جدا باستخادم fetch وليس axios

أحمد عبد الله2

السؤال

السلام عليكم .. لطالما اعتدت ان اتعامل مع اى apis باستخدام axios ولكنى احببت ان اجرب fetch .. 

قمت فعمليه ناجحة باستخدام then, catch ولكن عندما اردت استخدام  async await فانا اجد صعوبة هنا ..  استطيع طباعة الداتا فى الكونسول ولكن لا تظهر فى ال flatlist ما السبب

 

import React, {useEffect, useState} from 'react';
import {Button, FlatList, Text, View} from 'react-native';

function GetData() {
  const [data, setData] = useState([]);
  const getFetchThen = () => {
    fetch(
      'https://reactnative.dev/movies.json',
    )
      .then(response => response.json())
      .then(json => setData(json))
      .then(console.log(data))
      .catch(error => console.error(error));
  };

  // Async
  const getFetchAsync = async () => {
    try {
      let response = await fetch(
        'https://reactnative.dev/movies.json',
      );
      let json = await response.json();
      console.log(json);
      return json;
    } catch (error) {
      console.error(error);
    }
  };

  const asyncData = getFetchAsync();

  useEffect(() => {
    getFetchThen();
    getFetchAsync();
  }, []);

  return (
    <View style={{flex: 1, padding: 24}}>
      <View>
        <Button title="Get" onPress={getFetchThen} />
        <Button title="test" onPress={() => console.log(asyncData)} />
        <Button title="Get Fetch Async" onPress={getFetchAsync} />
        <FlatList
          data={asyncData}
          // data={data}
          keyExtractor={item => item.id.toString()}
          renderItem={({item}) => (
            <Text>
              {item.title}, {item.price}
            </Text>
          )}
        />
      </View>
    </View>
  );
}

export default GetData;

 

تم التعديل في بواسطة أحمد ابراهيم عبد الله
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

قم بتجربة تمرير ال data كالتالي asyncData.movies حتى تحصل على المصفوفة لذلك سيكون التعديل كالتالي

<FlatList
  data={asyncData.movies}// لاحظ هذا التعديل
  // data={data}
  keyExtractor={item => item.id.toString()}
  renderItem={({item}) => (
    <Text>
    {item.title}, {item.price}
    </Text>
  )}
/>

دائماً قم ب console.log للبيانات للتأكد من الوصول للبيانات التي تريدها

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...