如何解决当 useEffect() 运行一次时,组件不会呈现
所以我有以下代码,我在其中获取要在组件中呈现的数据。但是,如果将useEffect 设置为运行一次,它不会渲染组件内部的数据,并且持续运行是不可持续的。
import React,{ useState,useEffect } from "react";
import Chart from "react-google-charts";
const Bottom5 = ({ company }) => {
const [quiz,setQuiz] = useState('');
const [dataPoints,setDatapoints] = useState([]);
useEffect(() => {
var resultData = [];
fetch(`http://localhost:3001/company/dashboard/bottom5/${company}`)
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 0; i < data.length; i++) {
resultData.push({
label: data[i].name,y: data[i].sumCorrect
});
}
setDatapoints(resultData)
});
},[])
return (
<Chart style={{display:"inline-block"}}
width={'500px'}
height={'300px'}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
['Names','Result'],...dataPoints.map(d => [d.label,d.y])
]}
options={{
title: 'cybersecurity Bottom 5',chartArea: { width: '50%' },hAxis: {
title: 'Employees',minValue: 0,},vAxis: {
title: 'Total Correct',}}
// For tests
rootProps={{ 'data-testid': '1' }}
/>
)
}
export default Bottom5;
解决方法
会不会是你第一次挂载组件的时候没有传递一个 company
给它?
通常,由于代码依赖于 company
的值,因此最好将 company
添加到 useEffect
依赖项列表中。
useEffect(() => {
var resultData = [];
if (company) {
fetch(`http://localhost:3001/company/dashboard/bottom5/${company}`)
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 0; i < data.length; i++) {
resultData.push({
label: data[i].name,y: data[i].sumCorrect
});
}
setDatapoints(resultData)
});
}
},[company])
这样它只会在 company
属性更改时被调用。
使用钩子更新数组存在问题。
setDatapoints(resultData) // reference is same - not updating
setDatapoints([...resultData]) // do this << --
数组的引用不会改变,所以钩子不会自我更新。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。