為什么我在 React.js 中的最后一個 if 語句不起作用？ 我正在使用 jsx

Question

我想要做的是在沒有任何電影可顯示時顯示未找到的電影。 問題在於最后一個沒有獲取變量movieNotFound的條件。 我不太清楚這是否只是因為 jsx 中的條件不起作用或者是另一個問題。 我也嘗試過使用三元運算符和同樣的東西。

  const [isLoading, setisLoading] = useState(true);
  const [movieNotFound, setmovieNotFound] = useState(false);

  return (
    <div>
      {isLoading ? (
        <div class="spinner-grow" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      ) : (
        <>
          if (movieNotFound === true)
          {<h1>Movie not found</h1>} else
          {
            <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
            </div>
          }
        </>
      )}
    </div>
  );
}

export default MovieDetails;

Answer 1

為什么不這樣做呢

return (
    <div>
      {isLoading ? (
        <div class="spinner-grow" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      ) : (
        movieNotFound  ? 
          <h1>Movie not found</h1> : (
            <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
            </div>
          )

      )}
    </div>
  );

Answer 2

您的if只是 JSX output 中的文本。 它在片段（ <>...</> ）內，但不在表達式（ {...} ）內，所以它只是文本。

你有幾個選項可以做到這一點。 我只會在return之前使用if / else if / else ：

const [isLoading, setisLoading] = useState(true);
    const [movieNotFound, setmovieNotFound] = useState(false);
    let body;
    if (isLoading) {
        body = 
          <div class="spinner-grow" role="status">
              <span class="visually-hidden">Loading...</span>
          </div>;
    } else if (movieNotFound) {
        body = <h1>Movie not found</h1>;
    } else {
        body =
          <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
          </div>;
    }
    return <div>{body}</div>;
}

或者您可以使用另一個條件運算符，就像在同一代碼中對前一件事所做的那樣：

const [isLoading, setisLoading] = useState(true);
    const [movieNotFound, setmovieNotFound] = useState(false);
  
    return (
        <div>
            {isLoading ? (
                <div class="spinner-grow" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            ) : (
                <>
                    {movieNotFound
                        ?   <h1>Movie not found</h1>
                        :
                            <div>
                                <h1>{movie.title}</h1>
                                <h1>{movie.overview}</h1>
                            </div>
                    }
                </>
            )}
        </div>
    );
}

或將多個互斥表達式與&&一起使用：

const [isLoading, setisLoading] = useState(true);
    const [movieNotFound, setmovieNotFound] = useState(false);
  
    return (
        <div>
            {isLoading ? (
                <div class="spinner-grow" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            ) : (
                <>
                    {movieNotFound && <h1>Movie not found</h1>}
                    {!movieNotFound &&
                        <div>
                            <h1>{movie.title}</h1>
                            <h1>{movie.overview}</h1>
                        </div>
                    }
                </>
          )}
      </div>
    );
}

Answer 3

試試這個

{ movieNotFound && <h1>Movie not found</h1> }
{ 
  !movieNotFound &&
  <div>
     <h1>{movie.title}</h1>
      <h1>{movie.overview}</h1>
  </div>
}

Answer 4

這是因為 if 不能在 JSX 中工作。 沒有 javscript 會。 如果要有條件地渲染內容，可以將 jsx 分配給一個變量，並根據條件將其更改為不同的 JSX。 可以這樣做：

const MainPaymentPage =(props)=>{
    const [isNextClicked,setNextClicked]=useState(false);
    let componentCode=<IntroScreen click={()=>setNextClicked(true)}/>
    if(isNextClicked){
        componentCode=<Payment/>
    }
    return(
        {componentCode}
    )
}

export default MainPaymentPage;

componentCode 是最初保存一些 JSX 的變量，根據 isNextClicked，is 值將更改為完全不同的 JSX。 最后，渲染變量。

Answer 5

我認為以下解決方案對您有用。 If 條件未使用正確的語法實現。 嘗試這個：

 const [isLoading, setisLoading] = useState(true); const [movieNotFound, setmovieNotFound] = useState(false); return ( <div> {isLoading? ( <div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div> ): ( ()=> { if(movieNotFound === true) {<h1>Movie not found</h1>} else { <div> <h1>{movie.title}</h1> <h1>{movie.overview}</h1> </div> } } ) } </div> ); export default MovieDetails;