web-dev-qa-db-de.com

Korrigieren der Flusswarnung: Zerstörung (Fehlende Anmerkung)

Ich schreibe eine kleine React Native-App und versuche, Flow zu verwenden, aber ich kann nirgendwo ein richtiges Tutorial dazu bekommen.

Ich erhalte den Fehler: destructuring (Missing annotation) über den ({ station }) in der 1. Zeile dieses Codes:

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

station ist eine json-Antwort und code und label sind strings innerhalb dieser json .

Wie behebe ich den Fehler/die Warnung?

javascriptreactjsreact-nativeflowtype
22
jbssm

Ich würde das als schreiben

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

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

Es muss der Typ des Objektparameters angegeben werden, den die Funktion akzeptiert.

31
John

Ich habe Ihr Beispiel ausprobiert und No errors! erhalten, da Flow keine Typanmerkungen für private Funktionen erfordert.

Wenn ich stattdessen eine export so hinzufüge:

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

Ich erhalte folgende Fehlermeldung. (Was ich annehme, ist nahe genug an dem, was Sie sehen.)

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


Found 1 error

Sie können das auf mindestens zwei Arten lösen. Besser ist es, eine Typanmerkung für das Funktionsargument hinzuzufügen. Zum Beispiel:

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

oder

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

oder auch

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) =>
  ...

wenn Sie sicherstellen möchten, dass die Variable StationDetail immer mit einem richtigen Radio-Objekt aufgerufen wird, obwohl die aktuelle Implementierung nur das Feld station betrachtet.

Die andere Alternative ist, den ersten Kommentar in // @flow weak zu ändern und Flow den Argumenttyp eigenständig ableiten zu lassen. Das ist weniger gut ™, weil es einfacher ist, Ihre öffentliche API versehentlich zu ändern, und Ihre tatsächlichen Absichten werden weniger klar.

5
aij

Damit das Objekt zerstört werden kann, sollten Sie die entsprechenden Objektstrukturen auf der rechten Seite der Zuweisung bereitstellen. In diesem speziellen Fall sollte {station} als Funktionsargument (linke Seite der Zuweisung) von etwas wie {station:{code: "stg", label:"stg"}} gespeist werden. Stellen Sie sicher, dass Sie die Funktion StationDetail mit einem geeigneten Objekt als Argument aufrufen.

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

StationDetail(data);

0
Redu