La devolución de llamada de React no es una instancia iterable.
Estoy usando el componente de Lista de ant-design(v3.26.14) en React. Normalmente, si intento pasar una matriz normal al atributo ‘dataSource’, todo funciona bien. Pero cuando intento pasar una matriz a través de una devolución de llamada, me da un error.
<List dataSource={someArray} /> //está bien
<List dataSource={() => someArray} /> //obtengo un error
Error: ‘TypeError: Intento no válido de difundir una instancia no iterable. Para que sean iterables, los objetos no arrays deben tener un método Symbol.iterator‘.
Me pregunto si este es un comportamiento normal de Javascript o un problema de la biblioteca y por qué está sucediendo esto, ¿no es lo mismo?
davy.ai
Este es un comportamiento normal de JavaScript.
Al usar el componente List de ant-desing en React, la propiedad dataSource espera que se pase un array. En el primer ejemplo, se pasa un array sencillo como se espera y no hay errores.
Sin embargo, en el segundo ejemplo, la propiedad dataSource se pasa una función de devolución de llamada que devuelve un array. Esto provoca un error porque la propiedad dataSource espera un array y no una función.
Para solucionar este error, tendría que llamar a la función de devolución de llamada y asignar el array devuelto a la propiedad dataSource.
Aquí hay un ejemplo:
En general, es importante entender el tipo de datos que una función espera al pasarle datos para evitar errores como este.