Отображение двух массивов одновременно - PullRequest
Новая
       17

Отображение двух массивов одновременно

2 голосов
/ 28 июня 2019

У меня есть два разных массива, которые мне нужно отобразить вместе.Значения индексов из arr1 используются arr2, а данные из arr2 отображаются соответственно с данными из arr1.enter image description here

Как и на рисунке, данные в первом столбце принадлежат arr2, а данные во втором столбце принадлежат arr1. 

this.state={
    color:['red','green','blue', 'black'],
    data:[{
        Cars: ['ModelA', 'ModelB', 'ModelC']
    }]
}

componentDidMount(){
    const color_code = Object.assign( {}, (this.state.color));


        this.setState({
            color:color_code
        })
}


render(){
    const list = this.state.data.Cars.map( (item, index) => {
            const col = this.state.color[index];


            return (
                <View key={item.id}>
                        <View style={{width: 15,height: 15,borderRadius: 50, backgroundColor: col}} />

                        <View>
                            {item.map((name, i) => (
                                <Text style={{fontSize:12, paddingBottom:12, color:'gray'}}>{name}</Text>
                            ))}
                        </View>
                </View>
            )
    })
}

Здесьмой фрагмент, что я пытался сделать.Все, что я получаю, это только 'Красный' цвет как выходные данные в первом столбце, а полный список моделей во втором столбце.

Пожалуйста, помогите исправить это.

1 Ответ

1 голос
/ 28 июня 2019

Я сделал небольшой рефакторинг вашего кода.Для объяснения см. Комментарии: 

renderCars(){
      // make sure to really access your cars array 
      const list = this.state.data[0].Cars.map( (item, index) => {

            const color = this.state.color[index];
            // render Modelname and color side by side 
            return (
                <View key={index} style={{flexDirection: 'row'}}>
                       <View style={{width: 15,height: 15,borderRadius: 5, backgroundColor: color }} /> 

                        <View>

                                <Text style={{fontSize:12, paddingBottom:12, color:'gray'}}>{item}</Text>

                        </View>
                </View>
            )
    });
    return list;

}

render(){

    return ( 
      <View  style={styles.container}> 
      {this.renderCars()} 
      </View>
      );
}

Вот полный рабочий пример:

https://snack.expo.io/@tim1717/sponaneous-croissant

Редактировать: Пояснение к оператору по модулю:

Оператор по модулю является математической функцией.Здесь мы можем убедиться, что у нас есть доступ только к индексам внутри массива, которые действительно существуют.

Вот несколько примеров: 

1 % 3 = 1 
3 % 3 = 0 
4 % 3 = 1

Для вашего примера оператор по модулю необязателен, но рекомендуется использовать его.Особенно, если у вас больше машин, чем цветов, и вы хотите повторно использовать цвета

...