Question

我有一个应用程序，一次显示一个API中的数据。我只想在pageNumber的值> 1时才显示后退按钮。努力理解为什么它不允许我编写简单的if语句。

代码如下：

const TopRatedPage = () => {
  const [apiData, setApiData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [pageNumber, setPageNumber] = useState(1);
  const { results = [] } = apiData;

  useEffect(() => {
    setLoading(true);
    fetchTopRatedMovies(pageNumber).then((data) => setApiData(data));
    setLoading(false);
  }, [pageNumber]);

  return (
    <div className='top-rated-page-wrapper'>
      <h1>TopRatedPage</h1>
      {isLoading ? <h1>Loading...</h1> : <MovieList results={results} />}
      <button
        onClick={() => {
          setPageNumber(pageNumber + 1);
        }}>
        MORE
      </button>
      <button
        onClick={() => {
          setPageNumber(pageNumber - 1);
        }}>
        BACK
      </button>
    </div>
  );
};

我的目的是使BACK按钮在pageNumber中不可见，除非该值> 1。

Answer 1

您只需要限制其pageNumber的显示：

{pageNumber > 1 && <button
  onClick={() => {
    setPageNumber(pageNumber - 1);
  }}>
    BACK
</button>}

Answer 2

尝试一下

return (
        <div className='top-rated-page-wrapper'>
            <h1>TopRatedPage</h1>
            {isLoading ? <h1>Loading...</h1> : <MovieList results={results} />}
            <button
                onClick={() => {
                setPageNumber(pageNumber + 1);
                }}>
                    MORE
                </button>
            {pageNumber > 1 && (
                <button
                    onClick={() => {
                    setPageNumber(pageNumber - 1);
                }}>
                    BACK
                </button>
            )}
        </div>
    );

仅在满足条件的情况下才在React中渲染某些内容？

2 个答案: