TypeError: Undefined n'est pas un objet (évaluant 'ceci.State.utilisateur [index] .USUtilisation1.length')

Hey, j'essaie d'écrire plusieurs instructions conditionnelles pour le style basé sur la longueur de la matrice sélectionnée. Malheureusement, il ne reconnaît pas la syntaxe et me donnant l'erreur sur le titre. Je veux juste que cela reconnaisse le tableau concerné depuis que je suis en train d'écrire une plate-forme pour plusieurs articles de réseau utilisateur. Quelqu'un peut-il aider, s'il vous plaît?

Code ci-dessous P>

import React, { Component } from 'react';
import { View, Text, FlatList, Image, ImageBackground, PixelRatio, Platform, UIManager, TouchableOpacity, LayoutAnimation } from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
import DropDownItem from 'react-native-drop-down-item';


export default class App extends Component {

    constructor (props) {
    super(props)
    this.state ={

        users: [{

            uses1: '- Bottles',
            uses2: '- Cans',
            uses3: '- Jars',
            expanded: false
        },
        {
            uses1: '- Grays',
            uses2: '- Lines',
            uses3: '- Interior',
            expanded: false
        },
        {
            uses1: '- Live',
            uses2: '- Cutter',
            uses3: '- Riser',
            expanded: false
        },
    ]

    }
    if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }

      }


      changeLayout =  ({index}) => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

     this.setState(({ users }) => ({
        users: users.map((s, idx) => 
          idx === index ? {...s, expanded: !this.state.users[index].expanded} : {...s, expanded: false})
      }));
      console.log(this.state.users[index].expanded)



      };
//if uses1 + uses1.left + uses2 + uses2.left + uses3 + use3.left <=x then stay up or uses 3 go down

      getUses2style(index){
        if(this.state.users[index].uses1.length<=12)
        {return{ 
          fontSize: 17,
          left:100,
          top:-125,
          color: 'white',
          padding: 10}}
          else if(12<this.state.users[index].uses1.length<=22)
          {return{ 
            fontSize: 17,
            left:200,
            top:-125,
            color: 'white',
            padding: 10}}
      }

       render() {

//create an expand state for all materials in this.state
    return (
      // Remain Category image and CSS
      // add search bar
      <View
      style={{
        backgroundColor:'#262A2C',
        flex:1
      }}>
      <FlatList
     style={{marginTop:80,}}
        data={this.state.users}
        renderItem={({ item, index }) => (
       <View>

          <ImageBackground

          source={require('./Icons/error.png')} 
        //pay FlatIcon or design personal one
          style={{ 

            resizeMode: 'contain',

          position:'relative',

          width: wp('100%'), 
          left: wp('0%'),
          borderBottomWidth: 1,
          borderBottomColor: 'grey',
          padding: hp('6%'),
          }}
        >
       <View
            style={{
              flex:1,
             height:hp('19%'),
             width: wp('100%'),
             //height:hp('21%'),

              borderBottomColor: 'grey',

            }}>




              <Text 
              style={{ fontWeight: 'bold',
               fontSize: 22, 
               left:item.name.length<=5 ? wp('32.5%'):wp('27.5%'),
               top:hp('-9.5%'),


               }}>
               Stands
               </Text>
              <Text
              style={{
                fontWeight: 'bold',
                fontSize: 25, 
                top: hp('-25%'),
                left:wp('80%')

              }}>
              History
              </Text>


          </View>





   </ImageBackground>
   <TouchableOpacity activeOpacity={0.8}  
   onPress={() => {

             this.changeLayout({index})

              }} 

    style={{ padding: 10,

    backgroundColor:'black',

    left:wp('-10.9%'),
    top:hp('0%'),
    width: wp('120%'),
    height:hp('5%')}}>
   <Image
               style={{
               width:wp('9%'),
               height:hp('4.5%'),
              tintColor:'white',
              left:250,
              top:-10
               //tintColor:'#81F018'
               }}
               source={item.expanded ? require('./Icons/arrowDown.png') : require('./Icons/arrowUp.png') }/>
</TouchableOpacity>
<View style={{ height: item.expanded ? null : 0, overflow: 'hidden', backgroundColor:'black' }}>
            <Text 
            style={{
               fontSize: 17,
               left:150,
               top:-10,
               color: 'turquoise',
               padding: 10}}>
          Specs
            </Text>
            <View>

            </View>
            <Text 
            style={{
               fontSize: 17,
               left:125,
               top:-90,
               color: 'turquoise',
               padding: 10}}>
          Common uses
            </Text>
            <Text
             style={{
              fontSize: 17,
              left:0,
              top:-85,
              color: 'white',
              padding: 10}}>
{item.uses1}
            </Text>
            <Text
             style={
              this.getUses2style(index)}>
{item.uses2}
            </Text>
          </View>  
    </View>
        )}
      />
      </View>
    );
  }
}