Uczam się korzystać z bazy danych React.js i FireBase REALTIGE.

Mam prostą rozwijaną w ten sposób w moim formularzu rejestracyjnym:

<label>Why are you moving?</label>
<select>
  <option value="job">I got a new job</option>
  <option value="college">I started at a new college</option>
  <option value="other">Other reasons</option>
</select>

Powiedziano mi, że powinienem przechowywać prostą wartość opisową, taką jak "praca" w mojej bazie danych. Nie cały sam ciąg.

Więc moja baza danych w czasie rzeczywistym FireBase users Zobacz coś takiego:

users {
  23982472 {
    ...
    reasonForMoving: 'job',
    ...
  },
  ...
}

Działa to świetnie. Kiedy wpadam na problemy, jest kiedy próbuję wyświetlić oryginalny ciąg na mojej stronie internetowej.

W tej chwili robię, czy / inaczej stwierdzenie, ale to nie wydaje się słuszne. Poniżej znajduje się przykładowy składnik.

export function SomeComponent(props) {

  let textToDisplay = '';
  if (this.props.user.reasonForMoving === 'job') {
    textToDisplay = 'I got a new job';
  }
  else if (this.props.user.reasonForMoving === 'college') {
    textToDisplay = 'I started at a new college';
  }

  return (
    ...
    {textToDisplay}
    ...
  )
}

Jak to można zrobić w lepszy sposób? Wygląda na to, że jest to dużo niepotrzebnego kodu.

0
Julius 24 październik 2020, 19:01

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć mapy, jest to nieco czyszczenie w kodzie i szybciej, ale także rozważaj za pomocą instrukcji przełącznika.

var textToDisplay = new Map();

textToDisplay.set('job', 'I got a new job');
textToDisplay.set('college','I started at a new college');

export function SomeComponent(props) {
  return (
    ...
    {textToDisplay.get(this.props.user.reasonForMoving)}
    ...
  )
}

Z oświadczeniem włączania wyglądałoby to

export function SomeComponent(props) {

  let textToDisplay = '';
  switch(this.props.user.reasonForMoving {
    case 'job':
      textToDisplay = 'I got a new job';
      break;
    case 'college':
      textToDisplay = ' I started at a new college';
      break;
  }

  return (
    ...
    {textToDisplay}
    ...
  )
}
0
yi fan song 24 październik 2020, 16:09