Colonne React Recharts lors du premier rendu

Question

import React, { Fragment, useCallback } from "react" ;
importer {
  Diagramme à bandes,
  Bar,
  Conteneur réactif,
  Cellule,
  Liste d'étiquettes,
  l'axe Y,
} à partir de "recharts" ;
importer { fontSizes, textColors } depuis "styles/thème" ;

const CustomLabelImage = (props : any) => {
  const { x, y, valeur } = accessoires ;
  retour (
    
      
    
  );
} ;
const CustomLabel = (props : any) => {
  const { x, y, valeur } = accessoires ;
  retour (
    
      
        {valeur}
      
    
  );
} ;

const CustomLabelName = (props : any) => {
  const { x, y, valeur } = accessoires ;
  retour (
    
      
        {valeur?.split(" ")[0]} {valeur?.split(" ")(1]?.slice(0, 1)}
      
    
  );
} ;

exporter la fonction par défaut BarChartRedList ({
  données,
  couleur,
} : {
  données : {heure : chaîne ; perdu : numéro ; avatar ? : chaîne }[];
  withLabel? : booléen ;
  withAvatar ? : booléen ;
  couleur ? : chaîne ;
}) {
  const renderItems = useCallback(() => {
    retour (
      
        {data.map((élément, index) => {
          retour (
            
              }
              />
              }/>
              }
              />
              
            
          );
        })}
      
    );
  }, [données]);

  retour (
    

      
        
          
            
              
              
            
          
          
            {renderItems()}
          
        
      
    
  );
}
不如我预期的那样。在窗口加载后的第一次渲染中，图片和文本不可见，但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找出如何解决这个问题。
我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。

< /p>            

Answer 1

Après quelques recherches, j'ai trouvé la solution.

<Bar 
   yAxisId="left"
   dataKey="lost"
   isAnimationActive={false} //added this
>
  {renderItems()}
</Bar>