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>
            )
    })
}

这是我要执行的操作。我得到的只是第一列中输出的'Red'颜色，而第二列中列出了完整的模型。

请帮助纠正此问题。

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

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

同时映射两个数组

1 个答案: