如何解决在提取完成之前调用React组件
我在React中具有以下功能,但是存在无法及时完成将数据传递到Chart组件的提取操作的问题。因此,该图表将不显示任何图形。
export const OverviewChart = () => {
type dateValue = {
x: number,y: number
}
var data: Array<dateValue> = Array();
const fetchFromUrl = async() =>{
const response = await fetch(`${process.env.PUBLIC_URL}/tempData/monthly.csv`)
const responseText = await response.text();
const parsedResponse = readString(responseText);
parsedResponse.data.forEach(x => {
data.push( {x: Number(new Date(x[0])),y: Number(x[1]) } )
})
}
fetchFromUrl();
return(
<Chart data={data} currentValue={1840.87}/>
);
}
我在图形上具有一个重绘功能,因此当我调整大小时,它可以正确渲染,但是我希望它能够正确渲染而不必先调整大小。
解决方法
我认为您只需要正确使用状态即可:
export const OverviewChart = () => {
type dateValue = {
x: number,y: number
}
const [data,setData] = React.useState([]);
React.useEffect(() => {
let results = [];
const fetchFromUrl = async() =>{
const response = await fetch(`${process.env.PUBLIC_URL}/tempData/monthly.csv`)
const responseText = await response.text();
const parsedResponse = readString(responseText);
parsedResponse.data.forEach(x => {
results.push( {x: Number(new Date(x[0])),y: Number(x[1]) } )
})
setData(results);
}
fetchFromUrl();
},[]);
return(
<Chart data={data} currentValue={1840.87}/>
);
}
它应该以这种方式自动重新渲染,如果不是这样,除非有数据,否则我不会渲染图表:
return data.length ? (
<Chart data={data} currentValue={1840.87}/>
) : 'Loading...';
,
您需要在组件退货中实施“加载”验证。 这是一个简单的示例:
import React from 'react'
export const ComponentName = () => {
//React Hooks
const [isLoading,setIsLoading] = React.useState(true)
const fetchFromUrl = async() =>{
const response = await fetch(`your fetch`)
//other operations
//when job operations done loading is defined as false
setIsLoading(false)
}
fetchFromUrl();
return(
!isLoading? // = !(isLoading === true) => false; when isloading false,return false
<Component data={"data"} otherProps="props"/>
: null //OR (not recommended)
//<LoadingComponent /> // (recomended) OR
//<SpinningLoadingComponent /> // (recommended)
// is recommended to see loading when user call this component
);
}
,
- 您需要将数据放入状态。为此,您需要重写无状态组件以继承React.Component。另一种方法是调用forceUpdate,这是不推荐的。
- 在获取数据之前,您需要渲染一个空组件或加载微调器。提取成功后,您需要调用setState,这将再次调用render方法并正确绘制图表。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。