时间戳

首页 > 解决方案 > Flow 报告设置的可选对象类型属性错误？

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 createApp element because string [1] is incompatible with undefined [2] in propertyconfig.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: I've added an example on Flow's try repl site: https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWBbADrATgF1AEoCmAhgMb6TaxqgBE2pFdA3MigHa5HaTlGgyAV2yMuAVQDOPACoBPDAIDeiUKA4k0RAFyhJubJwDmAGlWgh07AH10JI0QD8u-YY6nEAX3ZcefMgJksByQKEbyiqAqapY8usKiRBJWEURm3oi4CgIACtQYkqAAvFGqQSFh8cGh4dmgXsjl+qBocgDC1cWlMVa60WrqmjqgAOQA6gAWJNwAbjwjZgMWVrZo9sMjAEYk2AB0AFYYRgvm3t5q5pdN+ABisLBdABRK5TWeoLp5sAUAlMUAfKBHuYADwAExQM3+5gGNwA8nCBqDgBCoYgfmxENdQABBDAYJ5-IqA-pqRi4EQcIEwgYASBBdwerzCRSUrQ6IXewGhSwxDUQRAAHlg8KAwUQ+EJoPg8RgWEA

标签： reactjs

解决方案

看起来App需要存在的user.user_image，所以 flow 期望你细化 Maybe 类型。所以你需要检查是否user_image不为空或未定义，即（只需换行user_image到if语句中）：

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

推荐阅读