Блог

У меня возникли проблемы с этим (просто?) цель.

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

 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 волшебство в .then асинхронной выборке? Другие идеи?

Обновить правку 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 . Я пытался сделать это до сих пор безуспешно, поэтому я также безуспешно пытался вставить строку operator в const instrumentList = блок.

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

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

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

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

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

 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>
    )
  }