javascript - 试图在不可扩展的对象上定义属性

Question

描述 我正在尝试为多个 Animated.Views 分配多个 useAnimatedStyle() 钩子，用于const mystyles = useSharedValue([]);制作 carousel 。

预期的

即使我在博览会刷新后添加或删除评论、代码等，它也不应该给出错误

实际的

在第一次通过 expo 加载应用程序或手动刷新时，当发生任何小的更改（如删除评论等）时，它可以正常工作，然后 expo 应用程序刷新Attempting to define property on object that isn't extensible

import React ,{useRef, useState}from 'react';
import { StyleSheet, Text, View,FlatList ,ScrollView,Dimensions,Button} from 'react-native';
import Practice from './practice';
import App from '../Scroll/main';
import Animated , {useAnimatedScrollHandler,
    useAnimatedStyle,useSharedValue,
    interpolate,
    Extrapolate,} from 'react-native-reanimated';
const Data = [
    {title : 'one' , key : 1},
    {title : 'two' , key : 2},
    {title : 'three' , key : 3},
    {title : 'four' , key : 4},
    {title : 'Five' , key : 5},
    {title : 'Six' , key : 6},
    {title : 'Seven' , key : 7},
    {title : 'Eight' , key : 8},
    {title : 'Nine' , key : 9},
    {title : 'Ten ' , key : 10},
    {title : 'Eleven' , key : 11},
    {title : 'Twelve' , key : 12},
    {title : 'thirteen' , key : 13},
];
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const {width, height } = Dimensions.get('window');
const Item_size = width * 0.70;
console.log("Item Size" + Item_size);
const Home = () => {
const [dataLength , setDataLength] = useState(Data.length);
    const myflat  = useRef();
    const MYindex = useSharedValue(null);   
    const scrolled = useSharedValue(0);
    const mystyles = useSharedValue([]);
    for(let i =0;i<= dataLength ; i++){
        mystyles.value[i] =   useAnimatedStyle(()=>{
            return{
                transform : [{ translateY:  interpolate(scrolled.value ,
                         [0,252],
                        [0,-100],
                         Extrapolate.CLAMP
                    )
                },]
            }
        });  
        ;
        console.log("Styles : " + mystyles.value[i])
    }
    const animatedView = useAnimatedStyle(()=>{
        return{
            transform : [{ translateY:  interpolate(scrolled.value ,
                     [0,252],
                    [0,-100],
                     Extrapolate.CLAMP
                )
            },]
        }
    });
    const  handleScroll = useAnimatedScrollHandler({
        onBeginDrag : (event) => {
            // console.log("");
            // console.log("OnBeginDrag event " + event.contentOffset.x);
        },
        onScroll : (event) =>{
            // console.log("OnsCroll event " + event.contentOffset.x);
            scrolled.value = event.contentOffset.x;
            console.log("scrolled.value : " + scrolled.value);
            // console.log(event);
            // console.log("animted View : " + animatedView.transform);
        },
        onEndDrag: (event)=>{
            // console.log("onEndDrag" +  event.contentOffset.x)
        },
        onMomentumBegin : (event)=>{
            // console.log("momentum begin"  +  event.contentOffset.x)
        },
        onMomentumEnd : (event)=>{
            console.log("momentum end"  +  event.contentOffset.x)
        }

    });
    return ( 
     <View style={styles.parentView}>
        <AnimatedFlatList
            ref={myflat}
            style={styles.flatList}
            horizontal={true}
            onScroll={handleScroll}
            pagingEnabled={true}
            keyExtractor={item => item.key.toString()}
            snapToInterval={Item_size}
            decelerationRate={0}
            data={Data}
            renderItem =
                {
                    ({item,index })=>{
                    MYindex.value = index;
                    console.log("MyIndex : " +  MYindex.value);
                    return (
                        <Animated.View  style={[styles.view,mystyles.value[index]]}>
                            {console.log("styles index : " + mystyles.value[index])}
                            <Text style={styles.Text}>{item.title}</Text>
                            <Button title=" scroll"
                            onPress={(e)=>
                                    {
                                        myflat.current.scrollToOffset({offset: 3000})
                                    }
                                }/>
                        </Animated.View>
                    )
                }
            }
            />
     </View>  
        // <Practice></Practice>
        // <App></App>
     );
}
export default Home;
const styles = StyleSheet.create({
    parentView : {
    },
    flatList : {
        backgroundColor : 'black',
    },
    cover : {
        height : 400,
        backgroundColor: 'yellow'
    },
    view : {
        flex: 1,
        padding: 20,
        width: Item_size,
        backgroundColor: 'pink',
    },
    Text : {
        backgroundColor: 'gray',
        height: 100
    },
    con : {
        backgroundColor: 'pink',
        height: 100,
        width: 100,
    },
    con2 : {
        backgroundColor: 'black',
        height: 100,
        width: 100,
    }
})