Блог

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

Я подумал, что это должно быть просто, но это не так..

У меня есть четыре переменные:

 const stNumbers = [1, 21, 31]
const ndNumbers = [2, 22]
const rdNumbers = [3, 23]
const thNumbers = [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 24, 25, 26, 27, 28, 29, 30]
  

Каждый из них представляет собой массив чисел от 1 до 31. Массив, в котором они находятся, зависит от того, как они отображаются в дате, т.Е. 1-й, 2-й, 3-й, 4-й и т.д.

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

 const numbersCheck = () => {
      if (stNumbers.includes(this.state.paymentDate)) {
        return <span>st</span>
      } else if (ndNumbers.includes(this.state.paymentDate)) {
        return <span>nd</span>
      } else if (rdNumbers.includes(this.state.paymentDate)) {
        return <span>rd</span>
      } else if (thNumbers.includes(this.state.paymentDate)) {
        return <span>th</span>
      } else {
        return <span></span>
      }
    }
  

Это вызывает ‘includes’ для проверки каждого из массивов и определения того, какой диапазон он должен отображать.

Затем я хочу отобразить эту функцию внутри моего компонента, чтобы вместо того, чтобы они были просто числом, т.Е. 3, 9, 12, 24 или любым другим примером, вместо этого он говорит 3-й, 9-й, 12-й, 24-й.

Ввод задает состояние при вводе текста.

Я пытаюсь сделать это следующим образом:

 <div className="link-debt-input-container">
              <input className="link-debt-number-input" list="date-list" name="paymentDate" value={this.state.paymentDate} onChange={this.onChange} />
                <datalist id="date-list">
                  <option value="1" />
                  <option value="2" />
                  <option value="3" />
                  <option value="4" />
                  <option value="5" />
                  <option value="6" />
                  <option value="7" />
                  <option value="8" />
                  <option value="9" />
                  <option value="10" />
                  <option value="11" />
                  <option value="12" />
                  <option value="13" />
                  <option value="14" />
                  <option value="15" />
                  <option value="16" />
                  <option value="17" />
                  <option value="18" />
                  <option value="19" />
                  <option value="20" />
                  <option value="21" />
                  <option value="22" />
                  <option value="23" />
                  <option value="24" />
                  <option value="25" />
                  <option value="26" />
                  <option value="27" />
                  <option value="28" />
                  <option value="29" />
                  <option value="30" />
                  <option value="31" />
                </datalist>
              { numbersCheck }
            </div>
  

Каждый раз, когда я пытаюсь отобразить свою страницу, я получаю следующую ошибку:

Предупреждение: функции недопустимы как дочерние функции React. Это может произойти, если вы возвращаете компонент вместо из render . Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

Я не понимаю, как это происходит, поскольку я возвращаю интервалы внутри функции ‘numbersCheck’?

Может кто-нибудь указать, где я ошибаюсь?

Вы должны вызвать метод, а не просто вставить его:

 { numbersCheck() }
  

JSX создает дерево элементов React. Вы пытаетесь вставить функцию вместо элемента в дерево.