对象在使用带有样式的组件的数组值时可能是“未定义”的。

Question

我正在构建一个骨架组件，它接受一个名为circleSizes的道具，它是一个数字数组，用于设置骨架的宽度和高度。

这是构成部分：

export const SkeletonHandler: React.FC<SkeletonHandlerProps> = ({
  count = 1,
  circle = false,
  circleSizes = [50, 50],
}) => {
  return (
    <SkeletonWrapper count={count} circleSizes={circleSizes}>
      <Skeleton count={count} circle={circle} />
    </SkeletonWrapper>
  );
};

我的types.ts：

export type SkeletonHandlerProps = {
  count?: number;
  circle?: boolean;
  circleSizes?: Array<number>;
};

我知道如果我删除了?，错误就会消失，但是我不希望这个属性是必需的。

还有我的样式-组件文件：

export const SkeletonWrapper = styled.div<SkeletonHandlerProps>`
  width: ${(circle) => (circle ? 'fit-content' : '100%')};
  ${({ circle, circleSizes }) =>
    circle &&
    css`
      .react-loading-skeleton {
        width: ${circleSizes[0]};
        height: ${circleSizes[1]};
      }
    `}
`

图像错误：

​

我试过的是：

在道具处为circleSizes = [50, 50]

• Putting数组放置默认值的

1. ，例如: types.ts上的默认值，例如:在样式组件文件上编号的circleSizes?: Array<number> | [50, 50];
2. Converting circleSizes，例如：width: ${Number(circleSizes[0])};

我做错什么了？

Answer 1

它抱怨是因为您在可能是undefined的变量上使用方括号操作数，所以尝试在circleSizes && circleSized[1]之前添加有效性检查。