javascript - create - react component props state

Cómo corregir la advertencia de flujo: desestructuración(falta anotación)

Question

Estoy escribiendo una pequeña aplicación React Native y estoy tratando de usar Flow, pero realmente no puedo obtener un tutorial adecuado sobre él en ningún lugar.

Sigo recibiendo el error: destructuring (Missing annotation) sobre la ({ station }) en la primera línea de este código:

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

station es una respuesta json y el code y la label son strings dentro de ese json .

¿Cómo soluciono el error / advertencia?

Answer 1

Para realizar el trabajo de desestructuración de objetos, debe proporcionar las estructuras de objetos adecuadas en el lado derecho de la asignación. En este caso particular, {station} como argumento de la función (lado izquierdo de la asignación) debe ser alimentado por algo como {station:{code: "stg", label:"stg"}} . Asegúrese de que está llamando a la función StationDetail con un objeto apropiado como argumento como.

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

StationDetail(data);

Answer 2

Probé tu ejemplo y No errors! obtuve No errors! , porque Flow no requiere anotaciones de tipo en funciones privadas.

Si por el contrario agrego una export como esta:

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

Obtuve el siguiente error. (Lo que supongo está lo suficientemente cerca de lo que estás viendo).

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


Found 1 error

Puedes resolver eso al menos de dos maneras. La mejor manera es agregar una anotación de tipo para el argumento de la función. Por ejemplo:

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

o

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

o incluso

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

si desea asegurarse de que siempre se llame al StationDetail con un objeto de Radio adecuado, aunque la implementación actual solo observe el campo de la station .

La otra alternativa es cambiar el primer comentario a // @flow weak y dejar que Flow // @flow weak el tipo de argumento por sí mismo. Eso es Less Good ™ porque hace que sea más fácil cambiar accidentalmente su API pública y hace que sus intenciones reales sean menos claras.

Answer 3

Yo escribiría esto como

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

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

Es necesario declarar el tipo de parámetro de objeto que la función acepta.