Javascript JSX中第二个数组上的映射

我目前正在映射一些数据，以便在React Native中的JSX状态栏上渲染4个点。但是，我还有第二个数组要映射，这样每个日期都会出现在注释需要日期的地方，以便日期位于渲染的每个点下方

我在那个评论下面映射它们，但是我需要它们作为第一个映射的一部分在上面。有办法吗

const StatusBar = ({ projectData }) => {

  const statusBarPositions = [1, 2, 3];
  const currentStatusBarPosition = () => {
    let position;

    switch (projectData.get('state')) {
      case 'Project 1':
        position = 1;

        break;
      case 'Project 2':
        position = 2;
        break;
      case 'Project 3':
        position = 3;
        break;
      default:
        position = 0;
    }

    return position;
  };

  const projectDates = ['12/1', '3/1', '6/1', '9/1']

  return (
    <View>
      <View style={ styles.statusBarContainer }>
        <View style={ styles.progressDotFirst } />
        {
          statusBarPositions.map((statusBarPosition) => {
            return (
              <View key={ statePosition } style={ styles.statusBarLineContainer }>
                <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
                <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
              </View>
              <View>
                <Text>{ ***need dates to go here*** }</Text>
              </View>
            );
          })
        }
      </View>
      <View>
        {
          projectDates.map((date) => {
            return (
              <Text>{ date }</Text>
            )
          })

        }
      </View>
    </View>
  );
};

StatusBar.propTypes = {
  projectData: PropTypes.instanceOf(Object)
};

export default statusBar;

const StatusBar=（{projectData}）=>{
const statusBarPositions=[1,2,3]；
const currentStatusBarPosition=（）=>{
让位；
开关（projectData.get（'state'））{
案例“项目1”：
位置=1；
打破
案例“项目2”：
位置=2；
打破
案例“项目3”：
位置=3；
打破
违约：
位置=0；
}
返回位置；
};
const projectDates=['12/1'，'3/1'，'6/1'，'9/1']
返回(
{
statusBarPositions.map（（statusBarPosition）=>{
返回(
=statusBarPosition）？[styles.statusBarLine，styles.statusBarActive]：styles.statusBarLine}/>
=statusBarPosition）？[styles.statusBarDot，styles.statusBarActive]：styles.statusBarDot}/>
{***需要约会才能来这里***}
);
})
}
{
projectDates.map（（日期）=>{
返回(
{date}
)
})
}
);
};
StatusBar.propTypes={
projectData:PropTypes.instanceOf（对象）
};
导出默认状态栏；

将数组索引作为第二个参数传递。如果这两个数组在索引方面彼此对应，则可以使用它来呈现日期（注意

statusBarPositions.map（（statusBarPosition，i）

）中的索引

i

）：

{
statusBarPositions.map（（statusBarPosition，i）=>{
返回(
=statusBarPosition）？[styles.statusBarLine，styles.statusBarActive]：styles.statusBarLine}/>
=statusBarPosition）？[styles.statusBarDot，styles.statusBarActive]：styles.statusBarDot}/>
{projectDates[i]}
);
})
}

这两个数组是否同步索引？换句话说，

projectDates[i]是否对应于

statusBarPositions[i]`的日期？很高兴这有帮助。请不要忘记投票并接受答案！

<View style={ styles.progressDotFirst } />
{
    statusBarPositions.map((statusBarPosition, i) => {
    return (
        <View key={ statePosition } style={ styles.statusBarLineContainer }>
        <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
        <View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
        </View>
        <View>
        <Text>{ projectDates[i] }</Text>
        </View>
    );
    })
}
</View>