图表刷新两次

Question

使用react-chartjs-2和chartjs创建的图表在更改值时会刷新2次。第一次，只有图形的形状在变化，第二次，y轴和x轴上的值在变化。

const Chart = ({country}) => {
const [dailyData,setDailyData] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setDailyData(await fetchDailyData(country))
}
fetchAPI();
},[country]);
const {day,infected,recoveries,deaths} = dailyData;
const lineChart = (
infected? (<Line
data={{
labels: day.map((data ) => (data)),
datasets:[
{
data:  infected.map((data) => (data)),
label: 'Infected',
borderColor: '#3333ff',
fill: true,
}],
}}
/> ) : null

)

Answer 1

您的dailyData状态有问题。您将默认值设置为一个空数组，但稍后尝试将其作为一个对象进行解构。

const asd=[1,2,4,5];
const {a,b,c}=asd;
console.log (a,b,c); // undefined, undefined, undefined
const [e,f,g]=asd; 
console.log (e,f,g); // 1,2,4

然而，你说你的图表在第二次闪光后确实有效。这意味着您原来的空数组不是useState挂钩的正确默认值。应该使用null并在销毁它之前检查它

更新：如果数据也加载两次，图表可能会闪烁两次。useEffect应该有一个if语句，用于检查数据是否已加载，并且仅在数据未加载时才加载。可能您可以添加另一个状态进行加载。这样就不会有两个并发的API调用。

你的代码看起来是这样的：

const Chart = ({country}) => {
const [dailyData,setDailyData] = useState(null);
useEffect(() => {
if(country && !dailyData){
const fetchAPI = async () => {

setDailyData(await fetchDailyData(country))
}
fetchAPI();
}
},[country]);
let lineChart=null
if (dailyData){
const {day,infected,recoveries,deaths} = dailyData;
lineChart = (<Line
data={{
labels: day.map((data ) => (data)),
datasets:[
{
data:  infected.map((data) => (data)),
label: 'Infected',
borderColor: '#3333ff',
fill: true,
}],
}}
/> )
}
}