react-native - React native 为什么会报错：× inputRange must be monotonically non-decreasing 0,NaN,NaN,NaN？

Question

我通过导航将两个对象传递到屏幕“UebungenAnzeigen”。比函数决定（）决定使用哪个对象来显示，取决于它是定义还是未定义。我必须将接收到的对象转换为数组才能将其用于轮播。当我将转换后的数组传递给作为轮播基础的平面列表的道具时，我得到了错误：

'× inputRange 必须是单调非递减的 0,NaN,NaN,NaN'

不知何故，编译器说我在一个索引为 0 的数组中有一个索引为 14 的数组，当我使用时我this.magicArray = Object.values( this.decidedObject);不确定这是否可能是问题的一部分。

提前致谢

  import * as React from 'react';
  import {
    View,
    ImageBackground,
    FlatList,
    TouchableWithoutFeedback,
    TouchableOpacity,
    Dimensions
  } from 'react-native';

       export default class UebungenAnzeige extends React.Component {
       constructor(props) {
       super(props);

      this.state = {
        title: '',
        erklaerung:'',
        dauer:'',

      };

      //receive the data
      //the random asanas from the system
      this.asanas = this.props.route.params.asanas;
      //the system picked by the user
      this.eigeneAsanas = this.props.route.params;
      //decide returns a JSON
      this.decidedObject=this.decide();
      console.log(this.decidedObject);
      //But we need an array for the flatlist so we got to convert it
      this.magicArray = Object.values( this.decidedObject);
      //check
      console.log(this.magicArray);

      //this.itemWidth = Dimensions.get('window').width;
      //this.itemHeight = Dimensions.get('window').height;
    

//to decide between eigeneAsanas and the random asanas chosen by the system

    decide() {

      if(this.eigeneAsanas=='undefinded'){
        
        return this.asanas;
     
      }
       
        return this.eigeneAsanas;

    }

keyExtractor = (item, index) => index.toString();

renderCarousel = ({item}) => (

  <Card>
    <TouchableWithoutFeedback
      onPress={() => {
        this.setState({
          title: item.name,
          erklaerung: item.erklaerung,
          dauer: item.dauer,
        });
        this.props.onCarouselPress;
      }}
        <TouchableOpacity  onPress= {() => this.props.navigation.navigate('Uebungen')}>
          Go
          </TouchableOpacity>

        </View>
  
    </TouchableWithoutFeedback>
 
    <View>
  
    <TouchableOpacity onPress= {() => this.props.navigation.navigate('PlanBeenden')}>Praxis beenden</TouchableOpacity>
    </View>
  </Card>
);

render() {
  
  return (
  <View >
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        keyExtractor={this.keyExtractor}
        data={this.magicArray}
        renderItem={this.renderCarousel}
        itemWidth={450}
        itemheight={1000}
      />
    </View>
  );
}

}

标签： react-nativeanimationinputcarouselreact-native-flatlist