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

كيف أعالج هذا الخطأ React Native .. scrollToIndex out of range: request index1 but maximum is -1

Ahmed Sawy

السؤال

السلام عليكم أريد ان اعرف ما الخطأ بهذا الكود .. رسالة الخطأ كالاتى  scrollToIndex out of range: request index1 but maximum is -1

مع ان هذا الخطأ لايظهر لى اذا قمت بعمل داتا عبارة عن array of objects وقمت بوضعها داخل ال FlatList  فان كل شئ يعمل بطريقة صحيحة .. اما عندما اقوم بعمل fetch ل api فانه يظهر لى هذا الخطأ .. مالحل ؟؟

 

import React, { useState, useRef, useEffect } from "react";
import {
  StyleSheet,
  View,
  FlatList,
  Dimensions,
  Text,
  TouchableOpacity,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";

import axios from "axios";


const phoneWidth = Dimensions.get("screen").width;
const phoneHeight = Dimensions.get("screen").height;

function ScrollScreen() {
  const [index, setIndex] = useState(0);
  const [border, setBorder] = useState(0);
  const refContainer = useRef();
  const refBox = useRef();

  const [data, setData] = useState([]);
  useEffect(() => {
    photos();
  }, []);

  function photos() {
    axios
      .get("https://jsonplaceholder.typicode.com/photos")
      .then(async function (response) {
        setData(response.data);
      })
      .catch((err) => console.error(err));
  }

  useEffect(() => {
    refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
  }, [index]);

  useEffect(() => {
    refBox.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
  }, [index]);

  const theNext = () => {
    if (index < photos.length - 1) {
      setIndex(index + 1);
      setBorder(index + 1);
    }
  };
  const thePrevious = () => {
    if (index > 0) {
      setIndex(index - 1);
      setBorder(index - 1);
    }
  };

  return (
    <View style={styles.con}>
      <AntDesign
        style={[styles.iconConPosition, { left: phoneWidth * 0.05 }]}
        onPress={thePrevious}
        size={55}
        color="#0dddcb"
        name="caretleft"
      />

      <AntDesign
        style={[styles.iconConPosition, { right: phoneWidth * 0.05 }]}
        onPress={theNext}
        size={55}
        color="#0dddcb"
        name="caretright"
      />

      <FlatList
        scrollEnabled={false}
        ref={refContainer}
        data={data}
        // data={photos}
        keyExtractor={(item, index) => item.id.toString()}
        style={styles.flatList}
        renderItem={({ item, index }) => (
          <View
            style={{
              height: 150,
              width: phoneWidth * 0.7,
              margin: 50,
              backgroundColor: "red",
              alignSelf: "center",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Text>{item.id}</Text>
            <Text>{item.title}</Text>
          </View>
        )}
        horizontal
        pagingEnabled //تفعيل خاصية التمرير
        showsHorizontalScrollIndicator={false} // محدد التمرير
      />

      <FlatList
        ref={refBox}
        data={data}
        // data={photos}
        keyExtractor={(item, index) => item.id.toString()}
        style={styles.flatList}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() => {
              setIndex(index);
              setBorder(index);
            }}
            style={
              border === index
                ? {
                    height: 100,
                    width: phoneWidth * 0.4,
                    margin: 7,
                    backgroundColor: "gray",
                    alignSelf: "center",
                    justifyContent: "center",
                    alignItems: "center",
                    borderWidth: 2,
                    borderColor: "blue",
                  }
                : {
                    height: 100,
                    width: phoneWidth * 0.4,
                    margin: 7,
                    backgroundColor: "gray",
                    alignSelf: "center",
                    justifyContent: "center",
                    alignItems: "center",
                  }
            }
          >
            <Text>{item.id}</Text>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        horizontal
      />
      <Text>{index}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  con: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#fae7ec",
    paddingBottom: 100,
  },
  flatList: {
    flex: 1,
    marginVertical: phoneHeight * 0.05,
  },
  iconConPosition: {
    position: "absolute",
    top: phoneHeight * 0.24,
    zIndex: 1,
  },
});
export default ScrollScreen;

 

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

Recommended Posts

  • 1

مرحباً أحمد:
الخطأ يحدث حينما تكلم ال api فقبل أن تحصل على النتيجة تكون ال data فارغة وأنت في نفس الوقت تحاول تحريك ال slider لقيمة معينة وهي index وقيمتها الإبتدائية 0 ولكن عندما يحاول البرنامج تنفيذ ال scroll للعنصر 0 أي العنصر الأول لل data فلن يجده لأن النتيجة لم ترجع بعد ولذلك يفشل البرنامج 

  • الحل : هو آن تقوم بالتحريك عندما تكون هناك data موجودة
      useEffect(() => {
        if(index >= 0 && data.length) { // الشرط هنا 
    
          refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
        }
      }, [index, data]); // تقوم بتنفيذ الدالة عند تغيير الداتا
    
      useEffect(() => {
        if(index >= 0 && data.length) {
    
          refBox.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
        }
      }, [index, data]);

     

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

  • 0
بتاريخ 5 دقائق مضت قال Mohammed Saber:

مرحباً أحمد:
الخطأ يحدث حينما تكلم ال api فقبل أن تحصل على النتيجة تكون ال data فارغة وأنت في نفس الوقت تحاول تحريك ال slider لقيمة معينة وهي index وقيمتها الإبتدائية 0 ولكن عندما يحاول البرنامج تنفيذ ال scroll للعنصر 0 أي العنصر الأول لل data فلن يجده لأن النتيجة لم ترجع بعد ولذلك يفشل البرنامج 

  • الحل : هو آن تقوم بالتحريك عندما تكون هناك data موجودة
    
      useEffect(() => {
        if(index >= 0 && data.length) { // الشرط هنا 
    
          refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
        }
      }, [index, data]); // تقوم بتنفيذ الدالة عند تغيير الداتا
    
      useEffect(() => {
        if(index >= 0 && data.length) {
    
          refBox.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت
        }
      }, [index, data]);

     

شكرا لك محمد .. شكرا على المعلومة والطريقة نجحت الحمد لله ^_^

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...