"如何限制整个页面在 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> }
    </>
    )
}