El tipo ‘Ref‘ debe tener un método ‘[Symbol.iterator]()’ que devuelva un iterador.
Tengo este código:
const [ candyMachine, setCandyMachine ] = ref<CandyMachineAccount>()
// ^^^^^^^^^ Error Aquí ^^^^^^^^^
y estoy obteniendo este error:
Type 'Ref<CandyMachineAccount | undefined>' must have a '[Symbol.iterator]()' method that returns an iterator.
Esto es CandyMachineAccount
:
export interface CandyMachineAccount {
id: anchor.web3.PublicKey;
program: anchor.Program;
state: CandyMachineState;
}
Mi código se basa en este repositorio de React: Fair-launch
Allí está escrito de esta manera:
const [candyMachine, setCandyMachine] = useState<CandyMachineAccount>();
Supongo que el problema está en que escribo una sintaxis inválida en Vue.
(Uso Vue3/Composition API)
davy.ai
El mensaje de error indica que el objeto
ref
debe tener un método[Symbol.iterator]()
que devuelva un iterador. Esto se debe probablemente al hecho de que los objetosref
son referencias reactivas en Vue, y el marco necesita poder iterar sobre ellos para actualizar cualquier dependencia que los utilice.Para resolver el problema, podrías intentar agregar un objeto plano como valor inicial para el
ref
, así:Alternativamente, podrías utilizar
reactive
en lugar deref
, lo cual crea un objeto reactivo que realiza un seguimiento automático de las dependencias:Ten en cuenta que, con el enfoque de
reactive
, no necesitas utilizar una función setter comosetCandyMachine
, ya que el objeto es automáticamente reactivo. En su lugar, puedes modificar directamente las propiedades del objetocandyMachine
, y Vue actualizará automáticamente cualquier componente que dependa de él.