javascript - 同时映射两个数组

Question

我有两个不同的数组需要映射在一起。来自 arr1 的索引值被 arr2 使用，来自 arr2 的数据相应地与来自 arr1 的数据一起呈现。

如图所示，第一列的数据属于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>
            )
    })
}

这是我试图做的片段。我得到的只是第一列中输出的“红色”颜色，而第二列中列出了完整的模型。

请帮助纠正此问题。

Answer 1

我对您的代码进行了少量重构。解释见评论:

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 

对于您的示例，模运算符不是必需的，但使用它是个好主意。特别是如果你的车多于颜色，你想重复使用这些颜色