问题渲染Nivo的ResponsiveBar

Question

我试图使用Nivo的Responsive (官方文档这里)制作一个非常简单的条形图，在我的React应用程序中(React v18)。

我已经成功地建立了一个基本的条形图，但它的行为很有趣。

当我加载页面时，它是空的。见截图

​

如果我导航到我的应用程序的另一页，然后导航回条形图所在的页面，它会突然显示条形图，但它们非常细，而且绝对不是很好的(它们不是垂直对齐x轴上的标签)。图片：

​

最后，如果我在有条形图的页面上(不管条形图是空的还是用细条显示的)，然后我进入我的代码并对条形图组件或导入它并呈现它的组件做任何更改(实际上甚至在某个地方添加了一个空格)，那么将重新加载条形图，并正确地显示为。见图：

​

这是我写的条形图代码：

// install (please make sure versions match peerDependencies)
// yarn add @nivo/core @nivo/bar
import { ResponsiveBar } from '@nivo/bar'

const data = [
    {
      day: "Monday",
      degress: 59
    },
    {
      day: "Tuesday", 
      degress: 61
    },
    {
      day: "Wednesday",
      degress: 55
    },
    {
      day: "Thursday",
      degress: 78
    },
    {
      day: "Friday",
      degress: 71
    },
    {
      day: "Saturday",
      degress: 56
    },
    {
      day: "Sunday",
      degress: 67
    }
  ];

// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
const FPPTBarChart = () => {
    return (
      <ResponsiveBar 
        data={data}
        keys={["degress"]}
        indexBy="day"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.4}
        valueScale={{ type: "linear" }}
        colors="#3182CE"
        animate={true}
        enableLabel={false}
        axisTop={null}
        axisRight={null}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "degrees",
          legendPosition: "middle",
          legendOffset: -40
        }}
      />
    );
};

export default FPPTBarChart;

是什么导致了这种奇怪的行为？有办法解决吗？我倾向于认为这是库中的问题，而不是我的代码(这是因为我已经以许多方式修改了我的代码，并尝试了来自官方文档以及各种代码和框片段的代码片段)。我知道Nivo还没有完全兼容React 18，所以我不得不使用--legacy-peer-deps (如推荐的这里)安装Nivo组件。这可能是问题的根源吗？我已经在我的应用程序中同时拥有了Nivo的ResponsiveLine和Nivo的ResponsivePie，它们看起来都运行得很好。另外，我对此做了大量的研究，除了这堆栈溢出帖子之外，什么都找不到，尽管Nivo是一个非常广泛的库。如果这是图书馆本身的问题/它与React 18的兼容性，那么我肯定会有很多人在我的船上吗？我很困惑..。

这是一个非常恼人的问题，我想知道我是否更好地把Nivo作为一个库，并过渡到另一种选择，如react曲线图-js-2，但我想确保它不是什么东西，可以修复之前，我作出了相当大的转变。

你的想法是什么？

Answer 1

与您处于相同的情况下，我升级到响应18，并使用"--legacy-peer-deps".安装了依赖项这似乎是这个问题的根源。