对象可能是“空”反应打字稿

Question

我正在使用打字稿在 React 应用程序中制作图表，并且实现方面的事情已经完成。

问题是我在行中收到错误，

backgroundColor: gradientFill
          ? gradientFill
          : chartRef.current.data.datasets[0].backgroundColor,

错误表明，

对象可能是“空”。

工作示例：

第 24 行出现错误。

尝试过的事情：

chartRef?.current?.data.datasets[0].backgroundColor

这会导致错误Property 'data' does not exist on type 'never'.。

能否请您帮我摆脱错误？提前致谢。

上下文：这个问题与我的previous question和this answer有关。

Answer 1

如果没有任何问题，您可以通过添加以下注释来禁用特定行的类型检查（仅当没有其他方法可以解决它时）

// ...other styles
// @ts-ignore: Unreachable code error
backgroundColor: gradientFill
          ? gradientFill
          : chartRef.current.data.datasets[0].backgroundColor,
//...other styles

Answer 2

对象可能是“空”。

这实际上是正确的。事实上，chartRef 的类型是React.MutableRefObject<Chart | null>，因此它的current 属性要么是Chart，要么是null。如果你确定访问getter时它不会为null，你可以使用non-null assertion operator，即。 !。所以你会这样做：

chartRef.current!

在这里，您可以调用它的方法，或访问属性，例如。 data.

但是，您会看到dataset 可能是undefined。因此，您应该实现一些条件逻辑来检查它是否有值，或者 - 再次 - 如果您确定它有值，则使用相同的运算符：

backgroundColor: gradientFill
          ? gradientFill
          : chartRef.current!.data.datasets![0].backgroundColor

Answer 3

可能chartRef.current没有定义，所以你需要检查它是否存在才能访问它上面的data属性：

backgroundColor:
          chartRef?.current?.data?.datasets
            ? chartRef.current.data.datasets[0].backgroundColor
            : gradientFill,

我还建议将chartRef 的定义移到访问它的formatData 函数之上。