javascript - 将过滤功能与 map 相结合

Question

我有一个组件，它使用辅助函数来获取日期列表，然后映射它们。在检索到的数据中，并不总是存在给定阶段的日期，因此我添加了逻辑，以便在该特定日期未定义时返回空字符串。

辅助函数获取属性 Phase =“阶段名称”的日期。

我能够将其中的一部分提取到辅助函数中，但感觉仍然有一种更简洁的方法来编写它。有人可以帮忙吗？

辅助函数

const getCoursePhaseDate = function(coursePhases, coursePhase) {
  return coursePhases.toJSON().filter((obj) => {
    return obj.phase === coursePhase;
  });
};

export default getCoursePhaseDate;

组件

import React from 'react';
import moment from 'moment';

// helpers
import getCoursePhaseDate from './helpers/getRehabStateDate';

const CourseInfo = ({ coursePhases }) => {

  const prep = getCoursePhaseDate(coursePhases, 'Prep')[0] && getCoursePhaseDate(coursePhases, 'Prep')[0].enteredOn || '';
  const intro = getCoursePhaseDate(coursePhases, 'Intro')[0] && getCoursePhaseDate(coursePhases, 'Intro')[0].enteredOn || '';
  const main = getCoursePhaseDate(coursePhases, 'Main')[0] && getCoursePhaseDate(coursePhases, 'Main')[0].enteredOn || '';
  const bonus = getCoursePhaseDate(coursePhases, 'Bonus')[0] && getCoursePhaseDate(coursePhases, 'Bonus')[0].enteredOn || '';

  const coursePhaseDates = [prep, intro, main, bonus];

  return (
    <div>
      <div>
        {
          coursePhaseDates.map((date, i) => {
            return (
              <span style={ styles.enteredOnDate } key={ i }>{ date }</span>
            );
          })
        }
      </div>
    </div>
  );
};

export default CourseInfo;

Answer 1

const hasOwn = {}.hasOwnProperty;

const getCoursePhaseDate = function(coursePhases, coursePhase) {
  const foundPhase = coursePhases.toJSON().find(obj => {
     return obj.phase === coursePhase && hasOwn.call(obj, 'enteredOn');
  });

  return foundPhase != null ? foundPhase.enteredOn : '';
};

export default getCoursePhaseDate;

import React from 'react';
import moment from 'moment';

// helpers
import getCoursePhaseDate from './helpers/getRehabStateDate';

const CourseInfo = ({ coursePhases }) => {
  const coursePhaseDates = ['Prep', 'Intro', 'Main', 'Bonus'].map(phase => {
     return getCoursePhaseDate(coursePhaseDates, phase);
  });

  return (
    <div>
      <div>
        {
          coursePhaseDates.map((date, i) => {
            return (
              <span style={ styles.enteredOnDate } key={ i }>{ date }</span>
            );
          })
        }
      </div>
    </div>
  );
};

export default CourseInfo;