Question

我有一个Component和他的 props ，还有一个另外的 prop 用于getDerivedStateFromProps。因此，如果我将 props 设置为另外一个，则会抛出一个错误，提示未使用 prop 。如果我在没有其他 prop 的情况下进行设置，则会引发一个错误，即我无法放置 prop 不在组件 props 中的错误：

type Props = {|
  name: string,
|};

type StaticProps = {|
  ...Props,
  surname: string,
|};

type State = {|
  name: string,
  surname: string,
|};

export class Foo extends Component<Props, State> {
  state: State = {
    name: '',
    surname: '',
  };

  static getDerivedStateFromProps(props: StaticProps) {
    return { surname: props.surname };
  }

  render() {
    return (
      <div>
        <div>{this.props.name}</div>
        <div>{this.state.surname}</div>
      </div>
    );
  }
}

使用这种流类型会引发错误：Cannot create 'Foo' element because property 'surname' is missing in 'Props' [1] but exists in props [2].Flow(InferError)。

如果我设置了Component<StaticProps, State>，则会引发另一个错误： 'surname' PropType is defined but prop is never usedeslint(react/no-unused-prop-types)

如何正确输入？

Answer 1

就像错误告诉您的那样：Props没有您尝试初始设置的属性surname。因此，您需要使用该属性来扩展类型：

type Props = {
  name: string,
  surname?: string
};

注意：您使用两种不同的道具类型：最初使用的Props和在StaticProps内部使用的getDerivedStateFromProps。在我看来，这真的没有道理。

编辑：如果您不需要Props中定义的所有属性，则可以使用属性名称后面的?字符将它们设为可选。

Answer 2

我在@BoyWithSilverWings的帮助下修复了该问题，他建议在.eslintrc中设置react版本，它可以工作。只需将其添加到.eslintrc文件中即可：

"settings": {
  "react": {
    "version": "<your react version>" // 16.8.5
  }
}

如果其道具不同，如何流动类型道具和getDerivedStateFromProps？

2 个答案: