[英]How can I restrict whole page to re-render in React?
I have js file which contains data that I am rendering on the page using useState<\/code> .
我有一个 js 文件,其中包含我使用
useState<\/code>在页面上呈现的数据。
I have a button
Display<\/code> which uses
fetch API<\/code> to get more data and display below the existing data.
我有一个按钮
Display<\/code> ,它使用
fetch API<\/code>来获取更多数据并显示在现有数据下方。
I would like to display
Loading<\/code> when
Display button<\/code> is clicked till data arrives.
我想在单击
Display button<\/code>直到数据到达时显示
Loading<\/code> 。
Problem is whole page is re rendered with
Loading<\/code> .
问题是使用
Loading<\/code>重新呈现整个页面。
I would like to display data that I am getting from js file as it is and just display
Loading<\/code> below
Display<\/code> button till I get more data from API
我想按原样显示从 js 文件中获取的数据,并在
Display<\/code>按钮下方显示
Loading<\/code> ,直到我从 API 获取更多数据
const [isLoading, setIsLoading] = useState(false);
if (isLoading) {
return <h2>Loading..</h2>;
}
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> }
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.