Ich habe eine Komponente, die eine Hilfsfunktion verwendet, um eine Liste von Daten abzurufen und diese dann zuzuordnen. In den abgerufenen Daten gibt es nicht immer ein Datum für eine bestimmte Phase. Daher habe ich eine Logik hinzugefügt, um eine leere Zeichenfolge zurückzugeben, wenn dieses bestimmte Datum nicht definiert ist.

Die Hilfsfunktion erhält ein Datum, an dem die Eigenschaft Phase = 'Phasenname' ist.

Ich konnte einen Teil davon in eine Hilfsfunktion extrahieren, habe aber das Gefühl, dass es immer noch eine viel sauberere Möglichkeit gibt, dies zu schreiben. Kann mir bitte jemand helfen?

Hilfsfunktion

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

export default getCoursePhaseDate;

Komponente

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;
0
Rigs 18 Jän. 2019 im 07:38

3 Antworten

Beste Antwort
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;


1
Mike Zinn 18 Jän. 2019 im 05:02

Diese und ähnliche Zeilen können mithilfe von Destrukturierungs- und Standardparametern wie folgt geändert werden

const {enteredOn: prep = ''} = getCoursePhaseDate(coursePhases, 'Prep')[0] || {};

Dies reduziert den Aufruf von Funktionen doppelt so stark.

Ich hoffe es hilft :)

1
klvenky 18 Jän. 2019 im 04:55

Wenn Sie es sauberer und einfacher machen möchten, verwenden Sie die Pfeilfunktionen:

const getCoursePhaseDate = (coursePhases, coursePhase) => coursePhases.toJSON().filter((obj) => obj.phase === coursePhase));

Und noch sauberer mit Destrukturierung:

const getCoursePhaseDate = (coursePhases, coursePhase) => coursePhases.toJSON().filter(({ phase }) => phase === coursePhase));
1
Jack Bashford 27 Mai 2019 im 07:40