Оператор React - if отображает условие else перед отображением соответствующего условия

#reactjs

Вопрос:

Сталкиваюсь с проблемой, когда у меня есть «оператор if», который отображает часть оператора else примерно за полсекунды до фактического соответствия первой части оператора. Как я могу заставить его отображать только то, что ему соответствует?

Например, первая часть оператора if и никогда не показывайте условие else оператора if. В случае кода ниже, когда браузер загружает компонент, он показывает «Это не технический отчет» примерно на полсекунды, затем исчезает и появляется «Это технический отчет». Когда это делается по-другому, первая часть оператора if никогда не появляется, и появляется только раздел else. Эта проблема возникает только в том случае, если совпадает первое условие. Код Ниже:

 import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
import { useParams } from "react-router-dom";

function ViewReport(props) {

  if (Report.InterviewType === "Technical") {
    return (
      <div>
        <h1>This is a Technical report</h1>
      </div>
    );
  } else {
    return (
      <div>
        <h1>This is not a Technical report</h1>
      </div>
    );
  }
}

export default ViewReport;

Ответ №1:

Это происходит потому, что изначально загрузка Report объекта занимает некоторое время, и в результате if условие не выполняется. Поэтому вы можете проверить Report.InterviewType , существует ли он.

 import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
import { useParams } from "react-router-dom";

function ViewReport(props) {

  if (Report.InterviewType === "Technical") {
    return (
      <div>
        <h1>This is a Technical report</h1>
      </div>
    );
  } else if(Report.InterviewType) {
    return (
      <div>
        <h1>This is not a Technical report</h1>
      </div>
    );
  }
}

export default ViewReport;

В этом случае я считаю, что начальное значение Report.InterviewType равно undefined или null . Если он не равен нулю, то вы должны указать соответствующее начальное значение для else if проверки. Допустим , начальное значение равно x , тогда оно будет следующим.

 else if(Report.InterviewType === x){ ... }

1. Спасибо за ваш ответ. Попытался добавить Report.InterviewType , как вы упомянули, но затем я получил сообщение об ошибке без возврата, так как оба условия не выполнились. Однако вы были правы, что это было связано с периодом загрузки во время извлечения данных API. Вероятно, это моя вина, так как я не предоставил полный код в исходном вопросе. Спасибо за совет, теперь он работает.

Ответ №2:

Благодаря @kavinduvlndika и @junaidfaryad я смог понять, почему возникла проблема, и я просто добавил пустое значение в качестве третьего условия в операторе if. Это позволяет создать промежуточную точку, пока API извлекает данные.

 import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
import { useParams } from "react-router-dom";

function ViewReport(props) {

  if (Report.InterviewType === "Technical") {
    return (
      <div>
        <h1>This is a Technical Interview</h1>
      </div>
    );
  } else if (Report.InterviewType === "LeadershipPrinciples") {
    return (
      <div>
        <h1>This is not a Technical Interview</h1>
      </div>
    );
  } else {
    return <div></div>;
  }
}