如何限制整个页面在 React 中重新呈现？

Question

我有一个 js 文件，其中包含我使用 useState 在页面上呈现的数据。我有一个按钮 Display，它使用 fetch API 获取更多数据并显示在现有数据下方。

我想在点击 Display button 时显示 Loading 直到数据到达。

问题是整个页面用 Loading 重新呈现。我想按原样显示从 js 文件中获取的数据，并仅在 Display 按钮下方显示 Loading，直到我从 API

获取更多数据

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


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

const fetchData = async () => {
    setIsLoading(true);
    const response = await fetch(fetchDataUrl);
    const data = await response.json();
    setIsLoading(false);
    setMoreData(data.datas);
  };

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> }
    </>
    )
}

怎么样？当前加载数据时只在底部显示加载。

如何限制整个页面在 React 中重新呈现？

How can I restrict whole page to re-render in React?

javascript

reactjs

rendering

use-state