Question

我使用以下代码得到了流量错误，我非常确定如何解决它。我得到的错误是：

[flow] object type (This type is incompatible with undefined (too few arguments, expected default/rest parameters))
type Props = {
    levels: {
        image: string;
        name: string;
        description: string;
        slug: string;
        value: number;
    }[];
}

这是我的代码：

// @flow
// @jsx h
import { h, Component } from 'preact';

// Components
import Level from '../components/Level';

type Props = {
  levels: Array<{
    image: string,
    name: string,
    description: string,
    slug: string,
    value: number,
  }>
};

type State = {}

class Levels extends Component<Props, State> {
  onclick = () => { /* ... */ }

  render({ levels }: Props) {
                     ^^^^^ <-- Error here
    return (
      <div>
        <ul>
          {levels.map(level => <Level {...level} />)}
        </ul>
      </div>
    );
  }
}

export default Levels;

错误消息有点令人困惑，因为它显示incompatible with undefined。我已经定义了道具。

我做错了什么？

Answer 1

这样修好......

class Levels extends Component<Props> {
  onclick = () => { /* ... */ }

  render(props: Props | void) {
    return (
      <div>
        <ul>
          {props && props.levels.map(level => <Level {...level} />)}
        </ul>
      </div>
    );
  }
}

本手册的以下页面解释了原因：https://flow.org/en/docs/types/arrays/#toc-array-access-is-unsafe

我无法使用：render({ levels }: Props | void)因为流抱怨levels可能为空。我发现使用props更容易。

对象类型（此类型与undefined（参数太少，预期的default / rest参数）不兼容）

1 个答案: