Невозможно отобразить значения во вложенном массиве в хранилище mobx на Flatlist

Question

Я пытаюсь отобразить значения из вложенного массива. Отображение значения из первого слоя, например item.pros или item.name, работает, но когда я хочу отобразить значения из вложенного массива, например item.uses.uses1, оно ничего не отображает икогда я пытаюсь использовать [index], он описывает это как неопределенное.Как я могу отобразить соответствующие значения?Спасибо за ваше время

Моб. Массив ниже:

import {observable, action} from 'mobx';
import {LayoutAnimation} from 'react-native'

class StateStorage {


  // Arrays
  @observable list= ['Category','','','']
  @observable selectedMaterial=''
  @observable  materials = [ 
    {


      name: 'Nap',
      uses:[
    {  uses1:'- Utility'}, 
     { uses2:'- Healthy' },
     { uses3:'- Timeful'},
      {uses4:''},
      {uses5:''},
      {uses6:''},
      {uses7:''},
      {uses8:''},
      {uses9:''},
      {uses10:''},
                    ],

      pros:'',
     cons:'',


    },
    {

      name: 'Cat',
      uses:[
    {  uses1:'- Live'}, 
     { uses2:'- Encounter' },
     { uses3:'- Playful'},
      {uses4:''},
      {uses5:''},
      {uses6:''},
      {uses7:''},
      {uses8:''},
      {uses9:''},
      {uses10:''},
                    ],

      pros:'',
     cons:'',
  ],
        name: 'Event',
      uses:[
    {  uses1:'- Hidden'}, 
     { uses2:'- Opportunist' },
     { uses3:'- Wasteful'},
      {uses4:''},
      {uses5:''},
      {uses6:''},
      {uses7:''},
      {uses8:''},
      {uses9:''},
      {uses10:''},
                    ],
      pros:'',
     cons:'',


   },
]


 for (i = 0; i < this.materials.length; i++)
              {
                for (n=0; n<this.materials[i].uses.length; n++){
                if(this.materials[i].uses[n].uses1===''
                || this.materials[i].uses[n].uses2===''
                || this.materials[i].uses[n].uses3===''
                || this.materials[i].uses[n].uses4===''
                || this.materials[i].uses[n].uses5===''
                || this.materials[i].uses[n].uses6===''
                || this.materials[i].uses[n].uses7===''
                || this.materials[i].uses[n].uses8===''
                || this.materials[i].uses[n].uses9===''
                || this.materials[i].uses[n].uses10===''
              //&& this.materials[i].count < 10
              )
              {this.materials[i].count++}}
                      }

              }

Реагирующий плоский список:

@observer
class App extends Component {
CommonUseViewStyle(index){



    StateStorage.incrementCount()



if(StateStorage.materials[index].count === StateStorage.materials.length*10
  ||  StateStorage.materials.length*9
  ||  StateStorage.materials.length*8) 
{return{height:0}}

else if( StateStorage.materials[index].count === StateStorage.materials.length*7)
{return{height:15}}

else if (StateStorage.materials[index].count === StateStorage.materials.length*6 )
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 30 : 31}}

else if(StateStorage.materials[index].count === StateStorage.materials.length*5 )
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 45 :47}}

else if(StateStorage.materials[index].count === StateStorage.materials.length*4 )
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 60 : 63}}

else if(StateStorage.materials[index].count === StateStorage.materials.length*3
)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 : 79}}

else if(StateStorage.materials[index].count === StateStorage.materials.length*2
)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 90 : 95}}

else if(StateStorage.materials[index].count === StateStorage.materials.length
  || StateStorage.materials[index].count === 0
)
{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 105 : 111}}

}




ProsViewStyle(index){

  if(StateStorage.materials[index].pros4 ==='') 
  {return{height:40}}

  else if(StateStorage.materials[index].pros4 !==''
  && StateStorage.materials[index].pros5 ==='')
  {return{height:70}}

  else if(StateStorage.materials[index].pros4 !=='' 
  && StateStorage.materials[index].pros5 !==''
  && StateStorage.materials[index].pros6 ==='' )
  {return{height:140}}

  else if(StateStorage.materials[index].pros4 !=='' 
  && StateStorage.materials[index].pros5 !==''
  && StateStorage.materials[index].pros6 !==''
  && StateStorage.materials[index].pros7 ==='' )
  {return{height:165}}

  else if(StateStorage.materials[index].pros4 !=='' 
  && StateStorage.materials[index].pros5 !==''
  && StateStorage.materials[index].pros6 !==''
  && StateStorage.materials[index].pros7 !==''
  && StateStorage.materials[index].pros8 ==='' )
  {return{height:210}}

  else if(StateStorage.materials[index].pros4 !=='' 
  && StateStorage.materials[index].pros5 !==''
  && StateStorage.materials[index].pros6 !==''
  && StateStorage.materials[index].pros7 !==''
  && StateStorage.materials[index].pros8 !=='' 
  && StateStorage.materials[index].pros9 ==='' 
  )
  {return{height:250}}



  }
       render() {





    return (

      <View
      style={{
        backgroundColor:'#262A2C',
        flex:1
      }}>
      <FlatList
     style={{marginTop:80,}}


     initialNumToRender={StateStorage.materials.length}

        data={StateStorage.materials}
        renderItem={({ item, index }) => (
       <View 

       >
         <TouchableOpacity
         onPress={() =>{
           StateStorage.chooseMaterial(index),
           console.log(StateStorage.materials[index].count) 




         }}>
          <ImageBackground
        // read computed                   
          source=require("./Icons/logout.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: null,
             //height:hp('19%'),
             width: null,
             //width: wp('100%'),
             //height:hp('21%'),

              borderBottomColor: 'grey',

            }}>


               <Image
               style={{
               width:wp('10%'),
               height:hp('5%'),
               left:wp('-10%'),
               top:hp('-5.5%'),
               //tintColor:'#81F018'
               }}
               source=require("./Icons/logout.png")/>
              <Image
               style={{
               width:wp('10%'),
               height:hp('5.5%'),
               left:wp('-10%'),
               top:hp('0%'),
               //tintColor:'#81F018'
               }}
               source=require("./Icons/logout.png")/>

               <Image
               style={{
               width:wp('10%'),
               height:hp('5.5%'),
               left:wp('-10%'),
               top:hp('6%'),
               //tintColor:'#81F018'
               }}
               source=require("./Icons/logout.png")}/>

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

               //left:item.name.length<=5 ? wp('31.5%'):wp('26.5%'),
               //top:hp('-1.5%')
              //left:item.name.length<=5 ? wp('32.5%'):wp('27.5%'),
               //top:hp('-3.5%')
               }}>
               {item.name}
               </Text>
              <Text
              style={{
                fontWeight: 'bold',
                fontSize: 25, 
                top: hp('-25%'),
                left:wp('80%')
                // top: hp('-14%'),
                //left:wp('80%')
                //top: hp('-19%'),
                //left:wp('80%')
              }}>
              {item.price} 
              </Text>


          </View>






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

             StateStorage.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={StateStorage.materials[index].expanded ? require('../Icons/arrowDown.png') : require('../Icons/arrowUp.png') }/>
</TouchableOpacity>

<View style={{height: StateStorage.materials[index].expanded ? null : 0,
      overflow: 'hidden', 
      backgroundColor:'black' }}>
            <Text 
            style={{
               fontSize: 17,
               left:150,
               top:-10,
               color: 'turquoise',
               padding: 10}}>
          Specs
            </Text>
            <View >
             <Image
             style={{width:wp('8.5%'),
             height:hp('4%'),
             display: item.textSpec1==='' ? 'none' : 'flex',
            tintColor:'white'}}
              source={item.spec1}/> 
            <Text
             style={{
              fontSize: 17,
              left:50,
              top:-35,
               display: item.textSpec1==='' ? 'none' : 'flex',
              color: 'white',
              padding: 10}}>
{item.cons}
            </Text>
            <Image
             style={{width:wp('8.5%'),
             height:hp('4%'),
             top:-30,
             display: item.textSpec2==='' ? 'none' : 'flex',
            tintColor:'white'}}
              source={item.spec2}/> 
            <Text
             style={{
              fontSize: 17,
              left:50,
              top:-65,
              display: item.textSpec2==='' ? 'none' : 'flex',
              color: 'white',
              padding: 10}}>
{item.pros}
            </Text>
            <Image
             style={{width:wp('8.5%'),
             height:hp('4%'),
             display:item.textSpec3==='' ? 'none' : 'flex',
             top:-60,
            tintColor:'white'}}
              source={item.spec3}/> 
            <Text
             style={{
              fontSize: 17,
              display:item.textSpec3==='' ? 'none' : 'flex',
              left:50,
              top:-95,
              color: 'white',
              padding: 10}}>
{item.name}

            </Text>
            <Image 
            //category implementation
            />

            <Text>


            </Text>
            </View>

            <Text 
            style={{
              fontSize: 17 ,
               left:125,
               top:-90,
               color: 'turquoise',
               padding: 10}}>
          Common uses
            </Text>
            <View style={ 
              this.CommonUseViewStyle(index)

              //5height:110
            }>

            <Text
            //RE-EDIT CSS THAT IS MARGIN BASED RATHER THAN POSITION
            style=
             {{
           position:'absolute',
              fontSize: 14 ,
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-19%') : hp('-14%'),
              color: 'white',
             padding: 10

             }}>
{item.uses.uses1}
            </Text>
            <Text
             style={{
         position: 'absolute',
              fontSize: 14 ,
              display:item.uses.uses2==='' ? 'none' : 'flex', 
              //top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-23.5%') : hp('-17.5%'),
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-16%') : hp('-11%'),
              color: 'white',
              padding: 10}

               }
              >
{item.uses.uses2}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses3==='' ? 'none' : 'flex',
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-13%') : hp('-8%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses3}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses4==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-10%') : hp('-5%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses4}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses5==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-7%') : hp('-2%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses5}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses6==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-4%') : hp('1%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses6}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses7==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-1%') : hp('4%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses7}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses8==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('2%') : hp('7%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses8}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses9==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('5%') : hp('10%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses9}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses10==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('8%') : hp('13%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses10}
            </Text>
            </View>

          <Text
          style={{

              fontSize: 17 ,
                left:168,
                top:-40,
                color: 'turquoise',
                paddingTop: PixelRatio.get()<= 2 && Platform.OS ===' android' ? 55 :65,
                paddingBottom: 10



          }}>
)}}

Часть, где у меня возникают проблемы с отображением:

 <Text 
            style={{
              fontSize: 17 ,
               left:125,
               top:-90,
               color: 'turquoise',
               padding: 10}}>
          Common uses
            </Text>
            <View style={ 
              this.CommonUseViewStyle(index)

              //5height:110
            }>

            <Text
            //RE-EDIT CSS THAT IS MARGIN BASED RATHER THAN POSITION
            style=
             {{
           position:'absolute',
              fontSize: 14 ,
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-19%') : hp('-14%'),
              color: 'white',
             padding: 10

             }}>
{item.uses.uses1}
            </Text>
            <Text
             style={{
         position: 'absolute',
              fontSize: 14 ,
              display:item.uses.uses2==='' ? 'none' : 'flex', 
              //top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-23.5%') : hp('-17.5%'),
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-16%') : hp('-11%'),
              color: 'white',
              padding: 10}

               }
              >
{item.uses.uses2}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses3==='' ? 'none' : 'flex',
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-13%') : hp('-8%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses3}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses4==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-10%') : hp('-5%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses4}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses5==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-7%') : hp('-2%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses5}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses6==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-4%') : hp('1%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses6}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses7==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('-1%') : hp('4%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses7}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses8==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('2%') : hp('7%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses8}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses9==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('5%') : hp('10%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses9}
            </Text>
            <Text
             style={{
              position:'absolute',
              fontSize: 14 ,
              display:item.uses.uses10==='' ? 'none' : 'flex',
              left:0,
              top: PixelRatio.get() <=3 && Platform.OS==='android' ? hp('8%') : hp('13%'),
              color: 'white',
              padding: 10

              } }
              >
{item.uses.uses10}
            </Text>
            </View>

          <Text
          style={{

              fontSize: 17 ,
                left:168,
                top:-40,
                color: 'turquoise',
                paddingTop: PixelRatio.get()<= 2 && Platform.OS ===' android' ? 55 :65,
                paddingBottom: 10



          }}>

Answer 1

Попробуйте с функцией карты.

, например: -

Array.map((data) => {     // Main array

 return(

 data.map((subData) => {        // inside array
  return(
    .... your code
    {subData.yourArrayElementName}
   )

 })

 )

})

Answer 2

Я думаю, вы смешиваете массивы и объекты.

Вы определяете materials как массив, но затем пытаетесь получить к нему доступ по имени, как объект (например, items.uses.use1 нотация объекта против items.uses[0] нотация массива)

В настоящее времяу вас есть массив объектов, но у каждого из них есть свой ключ use1 против use2

Если вам нужна дополнительная помощь, подумайте над тем, чтобы урезать свой пример именно тем, с чем у вас возникли проблемы.