流报告有关设置的可选对象类型属性的错误?

时间:2018-11-17 01:31:17

标签: reactjs

我已将我的配置的Flow类型定义为(重要部分):

interface currentUserType {
  id: number,
  name: string,
  user_image?: string,
  // ... 
}

export interface configType {
  // ...
  user: currentUserType,
}
// ...

字段user_image定义为可选,可能不存在,但是如果存在,则应为字符串。但是,当我尝试传递将user_image设置为字符串的对象时:

user: {
    id: 123,
    name: "whatever",
    user_image: "b0e7a75302bc1ee854891309ce936804.jpg",
}

Flow报告错误:"Cannot create应用程序element because string [1] is incompatible with undefined [2] in property config.user.user_image . "

[1]和[2]这里是对以上2个代码块的引用。 Flow是最新版本0.86。

我没有收到此错误,这没有任何意义。可选对象类型属性背后的想法不是可以传递字符串还是根本不传递属性?

因此,如果我传递字符串,为什么会期望未定义?

我首先认为这是此接口语法的问题,但它并没有抱怨其他非可选字段。这是Flow中的错误,还是我对这里的内容感到愚蠢?

更新:根据要求,以下是App的代码(TLDR:user_image不在任何地方使用)

// redux store, rootReducer and other stuff is already imported

type Props = {
    config: configType,
};

class App extends Component<Props> {

  config: this.props.config;

  render() {
   return (
      <Provider store={store}>
        <div className="app">
          <SomeOtherComponent />
        </div>
      </Provider>
    );
}

UPDATE2:我在Flow的try repl网站上添加了一个示例:https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWBbADrATgF1AEoCmAhgMb6TaxqgBE2pFdA3MigHa5HaTlGgyAV2yMuAVQDOPACoBPDAIDeiUKA4k0RAFyhJubJwDmAGlWgh07AH10JI0QD8u-YY6nEAX3ZcefMgJksByQKEbyiqAqapY8usKiRBJWEURm3oi4CgIACtQYkqAAvFGqQSFh8cGh4dmgXsjl+qBocgDC1cWlMVa60WrqmjqgAOQA6gAWJNwAbjwjZgMWVrZo9sMjAEYk2AB0AFYYRgvm3t5q5pdN+ABisLBdABRK5TWeoLp5sAUAlMUAfKBHuYADwAExQM3+5gGNwA8nCBqDgBCoYgfmxENdQABBDAYJ5-IqA-pqRi4EQcIEwgYASBBdwerzCRSUrQ6IXewGhSwxDUQRAAHlg8KAwUQ+EJoPg8RgWEA

1 个答案:

答案 0 :(得分:0)

看来App需要存在user.user_image,所以流程希望您进入refine the maybe type。因此,您需要检查user_image是否不为null或未定义(例如,将user_image包装到if语句中)

   if (config.user.user_image) {
      return <App config={config} />
   }