javascript - 在 JSX 中映射第二个数组

Question

我目前正在映射一些数据，以便在 React Native 的 JSX 状态栏上呈现 4 个点。但是，我有第二个数组，我想映射过来，这样每个日期都会出现在我有评论的地方 need dates to go here ，这样日期就可以了在呈现的每个点下方。

我在评论下方映射它们，但我需要它们作为第一张 map 的一部分在上面。有办法解决这个问题吗？

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;

Answer 1

array.map将数组索引作为第二个参数传递。如果两个数组在索引方面相互对应，那么您可以使用它来呈现日期(注意 statusBarPositions.map((statusBarPosition, i)) 中的索引 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>