"如何限制整個頁面在 React 中重新渲染？"

Question

我有一個 js 文件，其中包含我使用useState<\/code>在頁面上呈現的數據。 我有一個按鈕Display<\/code> ，它使用fetch API<\/code>來獲取更多數據並顯示在現有數據下方。

我想在單擊Display button<\/code>直到數據到達時顯示Loading<\/code> 。

問題是使用Loading<\/code>重新呈現整個頁面。 我想按原樣顯示從 js 文件中獲取的數據，並在Display<\/code>按鈕下方顯示Loading<\/code> ，直到我從 API 獲取更多數據

 const [isLoading, setIsLoading] = useState(false);


  if (isLoading) {
    return <h2>Loading..</h2>;
  }

Answer 1

const Component = () => {
    const [isLoading, setIsLoading] = useState(false);
    const fetchData = () => {
         setIsLoading(true)
         fetch(someUrl)
            .then(data => {
                setData(data)
                setIsLoading(false)
         });
    }
    return (
    <> 
        {yourData.map((data) => <IdkMaybeItsSomeComponent data={data}>}

        { isLoading  
          ? <h2>Loading...</h2> 
          : <button onClick={fetchData}>Get More Data</button> }
    </>
    )
}