Question

我正在编写一个小型的React Native应用程序，我正在尝试使用Flow，但我无法在任何地方获得适当的教程。

我一直收到错误：destructuring (Missing annotation)关于此代码第1行中的({ station })：

const StationDetail = ({ station }) => {
  const {
    code,
    label,
  } = station;

station是一个 json响应，而code和label位于 json 中的strings。

如何修复错误/警告？

Answer 1

我会把它写成

type StationType = {
  code: String,
  label: String,
}

function StationDetail({ station } : {station : StationType}) => {
  const {
    code,
    label,
} = station;

声明函数接受的对象参数的类型是必要的。

Answer 2

我尝试了您的示例并获得No errors!，因为Flow不需要私有函数的类型注释。

如果我添加export这样的话：

// @flow
export const StationDetail = ({ station }) => {
  const {
    code,
    label,
  } = station;
  return code + label;
};

我收到以下错误。（我认为这与你所看到的非常接近。）

Error: 41443242.js:2
  2: export const StationDetail = ({ station }) => {
                                   ^^^^^^^^^^^ destructuring. Missing annotation


Found 1 error

您可以通过至少两种方式解决这个问题。更好的方法是为函数参数添加类型注释。例如：

export const StationDetail =
  ({ station }: { station: { code: number, label: string } }) =>

或

export const StationDetail =
  ({ station }: {| station: {| code: string, label: string |} |}) =>

甚至

type Code = 1 | 2 | 3 | 4 | 5 | 6;
type Radio ={|
  station: {| code: Code, label: string |},
  signalStrength: number,
  volume: number,
  isMuted: bool,
|};
export const StationDetail = ({ station }: Radio) =>
  ...

如果您想确保始终使用正确的Radio对象调用StationDetail，即使当前实现仅查看station字段。

另一种方法是将第一个注释更改为// @flow weak，让Flow推断它自己的参数类型。这是Less Good™，因为它可以更容易地意外更改您的公共API并使您的实际意图不那么清晰。

Answer 3

为了对象解构工作，您应该在赋值的右侧提供适当的对象结构。在这种特殊情况下，{station}作为函数参数（赋值的左侧）应该由{station:{code: "stg", label:"stg"}}之类的东西提供。确保使用适当的对象作为参数调用StationDetail函数，如。

＆＃13;

var StationDetail = ({ station }) => {
  var {code, label} = station;
  console.log(code,label);
},
    data = {station: {code: 10, label:"name"}};

StationDetail(data);

＆＃13;

如何纠正流量警告：解构（缺少注释）

3 个答案: