Tengo un filtro de clasificación que toma una matriz para completar las opciones. Intento ver el value de la opción igual al texto dentro de la matriz, pero aparece el error dentro del título:
Invalid attempt to destructure non-iterable instanceNecesito pasar el texto como el valor dentro de la etiqueta de opción para que cuando el usuario actualice el filtro, se muestre el texto correcto para la elección que hizo el usuario.
Aquí está mi código:
function Sorting({by, order, rp}: SortingProps) { const opts = [ ['Price (low)', 'price', 'asc'], ['Price (high)', 'price', 'desc'], ['Discount (low)', 'discount', 'asc'], ['Discount (high)', 'discount', 'desc'], ['Most popular', 'arrival', 'latest'], ['Most recent', 'arrival', 'latest'], ]; const onChange = (i) => { const [text, by, order] = opts[i]; refresh({so: {[by]: order}}); /* GA TRACKING */ ga('send', 'event', 'My Shop Sort By', text, 'Used'); }; return ( <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}> <Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}> {opts.map(([text], i) => <Option key={i} value={text}>{text}</Option> )} </Select> </div> ) }Provoqué este error varias veces porque cada vez que escribo un useState , lo que haría a menudo, estoy acostumbrado a usar una matriz para desestructurar así:
const [ state, setState ] = useState();Pero mis ganchos personalizados generalmente devuelven un objeto con propiedades:
const { data, isLoading } = useMyCustomFetchApiHook(); En algún momento accidentalmente escribo [ data, isLoading ] en lugar de { data, isLoading } , lo que activa este mensaje porque está solicitando desestructurar propiedades de una matriz [], cuando el objeto del que está desestructurando es un objeto {}.
También encontré un error similar y, sinceramente, cometí un error muy tonto, tal vez debido al autocompletado del editor.
Tuve que hacer uso del gancho useState pero de alguna manera debido al autocompletado, lo escribí así.
const [state, setState] = useEffect(defaultValue);en vez de :(.
const [state, setState] = useState(defaultValue); Espero que ayude ya que un mensaje de error , en este caso, no fue útil en absoluto hasta que pasé un tiempo depurando esto.
El error Invalid attempt to destructure non-iterable instance ocurre debido a un error de lógica/codificación. El siguiente javascript se utiliza para ilustrar el problema:
[aaa,bbb] = somefunc()
Cuando se llama a somefunc() , debe devolver una matriz de al menos dos elementos. Si no es así, no hay forma de convertir el resultado de somefunc() en valores para aaa y bbb . Por ejemplo, el código:
[aaa,bbb] = { 'some': 'object'}
produciría este error.
Entonces, el error es realmente un error de codificación de Javascript y solo está sucediendo dentro del código React que maneja esta situación al imprimir el error que se muestra. Consulte MDN para ver la documentación de asignación de desestructuración .
Como dice @Mayank Shukla en su respuesta, la respuesta a la pregunta OP es arreglar esta línea de código:
const [text, by, order] = opts[i];
Cambiándolo a esto: const [text, by, order] = opts[i.target.value];
Con mi descripción anterior, debería quedar más claro que opts[i] el código original del OP no devolvía una matriz de al menos 3 elementos, por lo que el tiempo de ejecución de JavaScript no pudo establecer los valores de las variables text , by y order . El código modificado/fijo devuelve una matriz para que se puedan configurar las variables.
Después de buscar una respuesta a esta pregunta, me di cuenta de que las otras respuestas eran correctas y solo estoy resumiendo la causa raíz del mensaje de error.