responsejs: использование `if else` в рендере - PullRequest
Новая
       19

responsejs: использование `if else` в рендере

0 голосов
/ 07 марта 2019

У меня проблемы с этой (простой?) Целью.

На странице «Реакция шоу» я бы хотел, чтобы в разделе «Инструментарий» был заголовок неупорядоченного списка секций инструментов учащегося,что достаточно просто.Асинхронная настройка состояния работает, и в рендере я использую: 

let instrumentList = this.state.instrumentSections.map((instrument)=>{
  return <li>{instrument}</li>;
});

и в соответствующей части возврата, которую я использую: 

<h3>Your section(s):</h3>
          <ul>{instrumentList}</ul>

Проблема возникает, когда студентеще не назначен ни одной секции инструмента (поэтому состояние установлено на []).Я хотел бы отобразить «Секцию (и) инструмента», а затем «Вы еще не являетесь участником группы».вместо «Секции инструментов», а затем ничего, что происходит с приведенным выше кодом.

Я пытался использовать if then несколькими способами (один показан ниже, небольшие изменения пыталисьэффект), но независимо от того, что я пытаюсь, информация отображается правильно для студента с назначенными секциями инструментов, но продолжает отображать «Секции инструментов», а затем ничего.Если я console.log(instrumentList) в этом случае, он возвращает [].

, если затем при рендеринге: 

let instrumentList;
    const noBand = "You are not part of a band yet.  Please make sure that your instructor adds you to the right band through Ensemble.";
    if (this.state.instrumentSections !== [] ) {
      instrumentList = this.state.instrumentSections.map((instrument)=>{
        return <li>{instrument}</li>;
      });
    } else {
      instrumentList = noBand;
    }

Нужно ли мне попробовать применить эту магию if then в * 1021?* асинхронной выборки?Другие идеи?

Обновление Редактировать 3/12:

Я играю с предложением каждого.Я вижу, что должен делать встроенный условный оператор, но я не смог адаптировать его к своему коду, как это сделал CocoHot из-за (я думаю) размещения return.

.Вот рефакторинг, включенный в return для всего class: 

render(){
  const noBand = "You are not part of a band yet.  Please make sure that       your instructor adds you to the right band through Ensemble.";
  const instrumentList = this.state.instrumentSections.map((instrument)=>{
    <li>{instrument}</li>;
  });
  return instrumentList.length > 0 ? instrumentList : noBand;

  return (
      <div className="text-center student-show">
        <h1>{this.state.student.first_name} {this.state.student.last_name}</h1>
        <h3>Your section(s):</h3>
          <ul>{instrumentList}</ul>
      </div>
    )
  }

Я уверен, что основная проблема в вышеприведенном состоит в том, что render не может иметь более одного возврата, что, я думаю, означает, что я должен перевести строку условного оператора во вторую return и избавиться от первой return.Таким образом, я пытался сделать это безуспешно, поэтому я также безуспешно пытался обработать строку оператора в блоке const instrumentList =.

Есть еще предложения?Я знаю, что решение близко, и спасибо всем за вашу помощь.

Редактировать 2: При попытке перестроить в формат vanilla if else, чтобы увидеть, будет ли что-то работатьКстати, я заметил, что код не возвращал true при проверке длины, потому что он был установлен на > 0 (поэтому пустой массив оценивал false).Я изменил оператор на == 0, и теперь он, кажется, работает правильно, по крайней мере, в ванильном формате.Все еще не повезло с отображением noBand.

1 Ответ

0 голосов
/ 07 марта 2019

РЕДАКТИРОВАТЬ: Редактировать авторский код надлежащим образом. Не тестировал код, но должен быть в состоянии получить большую картину.

Как отметил Стивен Старк в комментарии, правильный способ определить, является ли список пустым, следует использовать this.state.instrumentSections.length > 0 вместо !== []. Имейте в виду, что сравнение javascript if очень опасно.

Вы можете использовать условный оператор, чтобы сделать ваш код проще: 

render() {
  const { student, instrumentSections } = this.state;
  return (
      <div className="text-center student-show">
        <h1>{student.first_name} {student.last_name}</h1>
        <h3>Your section(s):</h3>
          {instrumentList.length === 0 ? (
             <span>You are not part of a band yet...something more...</span>
          ) : (
             <ul>
               {instrumentSections.map((instrument) => {
                 return (<li>{instrument}</li>)
               })}
             </ul>
          )};

      </div>
    )
  }
...