<p><br /></p> <pre class="brush:php;toolbar:false;">import React, { Fragment, useCallback } from "react"; import { BarChart, Bar, ResponsiveContainer, Cell, LabelList, YAxis, } from "recharts"; import { fontSizes, textColors } from "styles/theme"; const CustomLabelImage = (props: any) => { const { x, y, value } = props; return ( <Fragment key={`${Math.random()}`}> <image x={ x! - 5} clipPath={"circle(40%)"} y={y - 105} width={55} height={55} href={value} /> </Fragment> ); }; const CustomLabel = (props: any) => { const { x, y, value } = props; return ( <Fragment key={`${Math.random()}`}> <text x={x} y={y} className="grotesk" style={{ fontWeight: 600, fontSize: fontSizes.f20, }} dx={10} dy={-10} textAnchor="top" fill={textColors.sceptreBlue} > {value} </text> </Fragment> ); }; const CustomLabelName = (props: any) => { const { x, y, value } = props; return ( <Fragment key={`${Math.random()}`}> <text x={x} y={y} className="grotesk" style={{ fontWeight: 300, fontSize: fontSizes.f10, }} dx={-4} dy={-35} textAnchor="top" fill={textColors.sceptreBlue} > {value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)} </text> </Fragment> ); }; export default function BarChartRedList({ data, color, }: { data: { time: string; lost: number; avatar?: string }[]; withLabel?: boolean; withAvatar?: boolean; color?: string; }) { const renderItems = useCallback(() => { return ( <Fragment> {data.map((item, index) => { return ( <Fragment key={`${item.lost}_${index}`}> <LabelList dataKey="avatar" position="top" key={`cell3-${index}`} width={100} offset={10} content={<CustomLabelImage />} /> <LabelList dataKey="time" key={`cell2-${index}`} position="top" offset={10} width={100} content={<CustomLabelName />}/> <LabelList dataKey="lost" position="top" key={`cell1-${index}`} offset={5} width={"100px"} content={<CustomLabel />} /> <Cell radius={8} key={`cell-${index}`} width={40} offset={20} fill="url(#barGradient)" /> </Fragment> ); })} </Fragment> ); }, [data]); return ( <div> <ResponsiveContainer height={350}> <BarChart width={500} height={200} data={data} margin={{ top: 120, right: 0, left: 0, bottom: 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()} </Bar> </BarChart> </ResponsiveContainer> </div> ); }</pre> <p>在窗口加载后的第一次点击按钮之后，</p><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>