首次渲染时，React Recharts柱状
<p><br />></p>
<pre class="brush:php;toolbar:false;">从“react”导入 React, { Fragment, useCallback };
进口 {
条形图，
酒吧，
响应式容器，
细胞，
标签列表，
Y轴，
} 来自“重新图表”；
从“样式/主题”导入{ fontSizes，textColors }；
const CustomLabelImage = (props: 任意) => {
const { x, y, 值 } = 道具；
返回 （
<片段键={`${Math.random()}`}>
<图像
x={+x! - 5}
ClipPath={"圆(40%)"}
y = {y - 105}
宽度={55}
高度={55}
href={值}
>>
</片段>
）；
};
const CustomLabel = (props: 任意) => {
const { x, y, 值 } = 道具；
返回 （
<片段键={`${Math.random()}`}>
<文本
x={x}
y={y}
类名=“格罗泰斯克”
风格={{
字体粗细：600，
字体大小：fontSizes.f20，
}}
dx={10}
dy={-10}
textAnchor=“顶部”
填充={textColors.sceptreBlue}
>
{价值}
</文字>
</片段>
）；
};
const CustomLabelName = (props: 任意) => {
const { x, y, 值 } = 道具；
返回 （
<片段键={`${Math.random()}`}>
<文本
x={x}
y={y}
类名=“格罗泰斯克”
风格={{
字体粗细：300，
字体大小：fontSizes.f10，
}}
dx={-4}
dy={-35}
textAnchor=“顶部”
填充={textColors.sceptreBlue}
>
{value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
</文字>
</片段>
）；
};
导出默认函数 BarChartRedList({
数据，
颜色，
}：{
数据：{ 时间：字符串；丢失：数量；头像？: 字符串 }[];
withLabel？：布尔值；
withAvatar？：布尔值；
颜色？：字符串；
}) {
const renderItems = useCallback(() => {
返回 （
<片段>
{data.map((项目, 索引) => {
返回 （
<片段键={`${item.lost}_${index}`}>
<标签列表
dataKey="头像"
位置=“顶部”
键={`cell3-${index}`}
宽度={100}
偏移量={10}
内容={<自定义标签图像/>}
>>
<标签列表
数据键=“时间”
键={`cell2-${index}`}
位置=“顶部”
偏移量={10}
宽度={100}
内容={<自定义标签名称/>}>>
<标签列表
数据键=“丢失”
位置=“顶部”
键={`cell1-${index}`}
偏移量={5}
宽度={“100px”}
内容={<自定义标签/>}
>>
<细胞
半径={8}
键={`单元格-${索引}`}
宽度={40}
偏移量={20}
填充=“网址（#barGradient）”
>>
</片段>
）；
})}
</片段>
）；
}， [数据]）;
返回 （
<条形图
宽度={500}
高度={200}
数据={数据}
保证金={{
顶部：120，
右：0，
左：0，
底部：20，
}}
>
<定义>
<线性渐变 id="barGradient" x1="0" y1="0" x2="0" y2="1">
>
>
</线性渐变>
</defs>
<Bar yAxisId="left" dataKey="lost">
{渲染项目()}
</栏>
</条形图>
</响应式容器>
）；
}</pre>
<p>在窗口加载后的第一次点击按钮之后，</p><p>我尝试使用图片渲染柱状图，但结果并不如我预想的那样。在窗口加载后的第一次渲染中，图片和文本不可见，但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找出如何解决这个问题。</p><p>我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。</p><p><br />< /p>
