Question

我正在使用带有React-Native的Flow。 VSCode提出了流程问题，我不知道如何更改方法以符合流程类型。

/* @flow */

type RandomType = {
  id: number,
  unit: string,
};

const renderData = (data: RandomType) => { return data.id };

const getRandomTypeOrEmpty = (isempty: boolean): RandomType | {} => {
    if (isempty) { return {} }
    return { id: 1, unit: 'litres'}
};

const data = getRandomTypeOrEmpty(true);
if (data && data.id ) { renderData(data) };

16：if（data && data.id）{renderData（data）}; ^无法通过绑定到{{1}的renderData来调用data，因为对象类型[1]中缺少属性data但在id [2]中存在属性。 >

这是我的问题：

我有一个为我提供数据的功能，该数据可以是 RandomType 或 空对象{} < / em> 。然后，我必须调用必须带有 RandomType 参数的函数。

因此，我根据 data 值和条件调用此函数。但是，即使从未使用不是 RandomType
的数据调用此函数，Flow仍然会引起问题。
如何解决此错误？

感谢您的时间

Answer 1

您应该使用maybe type来表示可选属性。

type RandomNumber = {
  id?: number,
  unit?: string
};

const a: RandomNumber = {}; // works

现在，如果类型为RandomNumber的变量为空，则仍然有效。

https://flow.org/try/#0PTAEAEDMBsHsHcBQiAuBPADgU1AJQIYB2AJrALYByArmQEZYBOoAvKAN6KigCWxA-AC5QhGvQYAaTqCqFuKQaADOKBt0IBzRAF8A3MgDGsQstD4hBEuWp1GLdrsRA

Answer 2

问题是您在getRandomTypeOrEmpty上的返回类型可能返回不精确的对象{}，上面可能有任何键。这意味着它上面可能有一个id键，因此检查data.id不允许流程确定您正在处理RandomType。

您可以改为返回一个精确的空对象，然后问题消失：

type RandomType = {
  id: number,
  unit: string,
};

const renderData = (data: RandomType) => { return data.id };

const getRandomTypeOrEmpty = (isempty: boolean): RandomType | {||} /* return an EXACT empty object */ => {
    if (isempty) { return {}.freeze } // <-- freeze the type so it's an exact object
    return { id: 1, unit: 'litres'}
};

const data = getRandomTypeOrEmpty(true);
if (data.id ) { renderData(data) }; // <-- only need to check for presence of id

Flow link

Answer 3

尝试一下


/* @flow */

type RandomType = {
  id ?: number,
  unit ?: string
};

const renderData = (data: RandomType) :number => { return data.id };

const getRandomTypeOrEmpty = (isempty: boolean): RandomType => {
    return isempty ? {} : { id: 1, unit: 'litres'}
};

const data = getRandomTypeOrEmpty(true);
if (data && data.id ) { renderData(data) };

React-流和条件渲染

3 个答案: