Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Lists passed through FunctionComponent.Of() upsets _createForOfIteratorHelper

Abierto
  • ¿Algo no está bien?
#203 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
fsharp, react
Área
frontend

Línea de trabajo

Comience con la reproducción proporcionada de AutoComplete.fs y compare la ruta de autocompletado directa con FunctionComponent.Of. Siga la llamada generada a través de Util.ts createObj y Util.js _createForOfIteratorHelper, centrándose en el valor de props que se pasa a keyValueList. Se considera terminado cuando el ejemplo autocompleteF ya no genera el TypeError de no iterable y conserva los props indicados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I'm trying to integrate with reactjs-autocomplete.

If I use the direct integration (autocomplete in module AutoComplete below), it kind of works. The things that don't seem to work so well may work better when it's mounted as a FunctionComponent (using autocompleteF in the same module).

However, the props list now throws a runtime TypeError at the call to keyValueList, and I can't see why. You can still take the head/tail, and the same call to keyValueList works just fine when called from the plainer autocomplete.

Uncaught TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    _createForOfIteratorHelper Util.js:140
    createObj Util.ts:520
    autocompleteF AutoComplete.fs:20

module AutoComplete

open Fable.React
open Fable.Core.JsInterop
open Fable.Core
open Browser

type AutoCompleteProps<'T,'V> = 
  | Items of 'T array
  | RenderItem of ('T -> ReactElement)
  | Value of 'V
  | GetItemValue of ('T -> 'V)
  | OnChange of (Browser.Types.Event -> string -> unit)
 
let inline autocomplete (props : AutoCompleteProps<'T,'V> list) : ReactElement =
    let propsObj = (keyValueList CaseRules.LowerFirst props)
    ofImport "default" "react-autocomplete" propsObj []

let autocompleteF<'T,'V>  =
    FunctionComponent.Of(fun (props : AutoCompleteProps<'T,'V> list) -> 
        let propsObj = (keyValueList CaseRules.LowerFirst props)
        div [] [ 
            ofImport "default" "react-autocomplete" propsObj []
            str "autocomplete" 
        ]
    )

This is how the call to autocompleteF is defined

              div [] [
                AutoComplete.autocompleteF [
                  Items [| { Label = "HelloX" }; { Label = "WorldX" } |]
                  Value "HelloX"
                  RenderItem (fun item -> div [] [ str item.Label ])
                  GetItemValue (fun item -> item.Label)
                  //OnChange (fun e v -> Select v |> dispatch)
                ]
              ]
Lenguaje dominante
F#
Estrellas
276
Forks
65
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de fable-compiler/fable-react

Todos los issues de fable-compiler/fable-react

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.