<p><br /></p> <pre class="brush:php;toolbar:false;">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 ( <Clé de fragment={`${Math.random()}`}> <image x={+x! - 5} clipPath={"cercle(40%)"} y={y - 105} largeur={55} hauteur={55} href={valeur} /> </Fragment> ); } ; const CustomLabel = (props : any) => { const { x, y, valeur } = accessoires ; retour ( <Clé de fragment={`${Math.random()}`}> <texte x={x} y={y} nom de classe="grotesk" style={{ poids de la police : 600, taille de police : fontSizes.f20, }} dx={10} dy={-10} textAnchor="haut" fill={textColors.sceptreBlue} > {valeur} </texte> </Fragment> ); } ; const CustomLabelName = (props : any) => { const { x, y, valeur } = accessoires ; retour ( <Clé de fragment={`${Math.random()}`}> <texte x={x} y={y} nom de classe="grotesk" style={{ poids de la police : 300, taille de police : fontSizes.f10, }} dx={-4} dy={-35} textAnchor="haut" fill={textColors.sceptreBlue} > {valeur?.split(" ")[0]} {valeur?.split(" ")(1]?.slice(0, 1)} </texte> </Fragment> ); } ; 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 ( <Fragment> {data.map((élément, index) => { retour ( <Fragment key={`${item.lost}_${index}`}> <ListeÉtiquettes dataKey="avatar" position = "haut" clé={`cell3-${index}`} largeur={100} décalage={10} content={<CustomLabelImage />} /> <ListeÉtiquettes dataKey="heure" clé={`cell2-${index}`} position = "haut" décalage={10} largeur={100} content={<CustomLabelName />}/> <ListeÉtiquettes dataKey="perdu" position = "haut" clé={`cell1-${index}`} décalage={5} largeur={"100px"} content={<CustomLabel />} /> <Cellule rayon={8} clé={`cellule-${index}`} largeur={40} décalage={20} fill="url(#barGradient)" /> </Fragment> ); })} </Fragment> ); }, [données]); retour ( <div> <Hauteur du ResponsiveContainer={350}> <Graphique à barres largeur={500} hauteur={200} données={données} marge={{ haut : 120, à droite : 0, gauche : 0, bas : 20, }} > <defs> <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor={color} stopOpacity={1} /> <stop offset="95%" stopColor={color} stopOpacity={0.2} /> </linearGradient> </defs> <Bar yAxisId="left" dataKey="lost"> {renderItems()} </Barre> </Graphique à barres> </ResponsiveContainer> </div> ); }</pré> <p>不如我预期的那样。在窗口加载后的第一次渲染中，图片和文本不可见，但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找出如何解决这个问题。</p><p>我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。</p><p><br />< /p>

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