流程："Cannot access computed property using undefined [1]" 当对函数反应组件使用默认道具时

Question

/* @flow */
import React from 'react';
type Props = {
  variant?: string,
}
const colors = {
  textColor: {
    disabled: '#868e96',
    primary: '#ffffff',
  }
};
const Button = (props: Props) => {
  const { variant } = props;
  return (
    <span style={{ color: colors.textColor[variant] }}>
      Foo
    </span>
  );
};
Button.defaultProps = {
  variant: 'primary',
};
export default Button;

上述代码会导致以下流误：

Cannot access computed property using  undefined [1].

我还为流编辑器添加了示例。

似乎流量无法确定variant变量的类型，因为悬停在其上显示：

void | string
const variant: string

但是，这是没有意义的，因为任何一个variant都是字符串（如果通过了道具），或者默认为'primary'，这也是字符串。

我还检查了官方文档：
使用功能组件的默认道具

我在做什么错？

Answer 1

看起来Flow与defaultProps有一些问题。

您问题的解决方案是将默认属性值作为默认参数传递：

const Button = ({ variant = 'primary' }: Props) => {
  return (
    <span style={{ color: colors.textColor[variant] }}>
      Foo
    </span>
  );
};

这是流编辑器中的工作版本。

Answer 2

如下所述，您可以在提供 defaultProps 时离开可选类型。流将确保它们是可选的。

因此，删除该可选类型，错误将消失。在此处查看